ImageFlow es otra bonita galería basada en JavaScript y la cual por su aspecto sin duda quedaría bien en cualquier proyecto online que tengamos en mente. ImageFlow es muy similar en varios aspectos con MooFlow aunque cuenta con algunas diferencias o algunos agregados. ImageFlow nos permite navegar entre las imágenes utilizando el scroll de nuestro ratón o bien utilizando un sistema de navegación integrado a la galería y el cual moveremos esta vez, de forma manual con nuestro ratón. Esto permite al usuario desplazarse bien entre cada una de las imágenes, yendo de un lado a otro. También se han hecho muchas mejoras con respecto al div contenedor de la galería, lo que garantiza que el desplazamiento producido por nuestro ratón, solo se produzca al estar sobre el div que contiene a la misma. Su utilización es sumamente fácil y los efectos que hacen a la galería muy agradables. ImageFlow y MooFlow son dos galerías que tranquilamente podríamos comparar por su similitud, y ver así, cual de las dos se asemeja mas, a lo que deseamos conseguir para nuestro proyecto online.
Ver demo - Descarga demo
Instalacion:
Descargamos el script ImageFlow
y como es costumbre, lo primero que haremos será realizar la llamada correspondientes al script, Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head >
agregamos un poco de estilo
img {
position:absolute;
top:0px;
border:none;
}
h1 {
text-align:center;
}
a{
color:#fff;
}
.none{
visibility:hidden;
}
.none div{
display:none;
}
.clear{
clear:both;
}
#images{
visibility:hidden;
}
#loading{
margin-top:50px;
text-align:center;
width:100%;
}
#loading img{
margin-top:10px;
position:relative;
}
#captions{
position:relative;
text-align:center;
z-index:10000;
}
#scrollbar{
visibility:hidden;
position:relative;
border-bottom:1px solid #b3b3b3;
z-index:10001;
}
#scrollbar_slider{
position:absolute;
margin-top:-7px;
margin-left:-7px;
z-index:10002;
background-image:url(slider.png);
background-repeat:no-repeat;
width:14px;
height:14px;
}
#imageflow{
background-color:#000;
margin-left:350px;
text-align:left;
color: #fff;
}
</style>
Por ultimo la estructura de nuestra galeria
<div id="loading">
<b>Loading images</b><br/>
<img src="loading.gif" width="208" height="13" alt="loading" />
</div>
<div id="images">
<img src="img/img001.png" alt="Image 1" />
<img src="img/img002.png" alt="Image 2" />
<img src="img/img003.png" alt="Image 3" />
<img src="img/img002.png" alt="Image 4" />
<img src="img/img003.png" alt="Image 5" />
<img src="img/img001.png" alt="Image 6" />
<img src="img/img002.png" alt="Image 7" />
<img src="img/img003.png" alt="Image 8" />
<img src="img/img002.png" alt="Image 9" />
<img src="img/img001.png" alt="Image 10" />
</div>
<div id="captions"></div>
<div id="scrollbar">
<div id="slider"></div>
</div>
</div>
<div class="clear"></div>
Loading ...
Slideflow - AJAX Gallery | Infected-FX| tutoriales, recursos y referencias para desarroladores y diseñadores web
18-12-2007
Permalink
[...] un tiempo en xybernéticos habían mostrado una galería llamada ImageFlow ó MooFlow, ahora nos encontramos con otra [...]
leny
18-12-2007
Permalink
Hola, Xyberneticos, miraba esta galeria imagen flow y me gusta, sin embargo no se cual de los dos códigos es el que debo usar, para mi blog(blogger) . muestras dos, uno es css y el html cual es el que debo usar, podrias explicarme este punto.. graciassssss esta super buena tu web.
jane
18-12-2007
Permalink
puedo utilizar este control dentro de una pagina aspx????
lo instalo para utilizarlo pero ya estando en runtime no me despliega la imagen, si navego con el mouse si avanza pero no veo la imagen, si doy click si me lleva al link que le puse. sera por que uso php dentro de un aspx???
gracias
Niennor
18-12-2007
Permalink
Saludos!
No sé si me puedes comentar respecto a la compatibilidad en IE6, si sabes algo por favor comentamelo!
Muchas gracias desde ya.
Iván
18-12-2007
Permalink
En IE6 funciona sin ningún problema. Hasta ahora, en todos los navegadores en que he probado (FF2 y FF3, IE6, IE7, Opera) funciona perfecto
Miguel
18-12-2007
Permalink
todo funciona pero no hallo la forma de que se vean las imagenes iniciales? cuando ,doy click me va a la imagen correspondiente. Cambiar colores y estilos tambien .., la ruta de la carpeta de imagenes tambien.. que me pueden decir?
ImageFlow, galeria em Javascript para criar a sua Coverflow | Alyen Studio .com
18-12-2007
Permalink
[...] Fonte: Xyberneticos [...]