ImageFlow, Otra galería en JavaScript para crear tu Coverflow

Javascript, Scripts, Galerias, Diseño Web

imageflow.jpg

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 >

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="js/imageflow.js"></script>

agregamos un poco de estilo

PLAIN TEXT
CSS:
  1. <style type="text/css">
  2. img {
  3.     position:absolute;
  4.     top:0px;
  5.     border:none;
  6. }
  7. h1 {
  8.     text-align:center;
  9. }
  10. a{
  11.     color:#fff;
  12. }
  13. .none{
  14.     visibility:hidden;
  15. }
  16. .none div{
  17.     display:none;
  18. }
  19. .clear{
  20.     clear:both;
  21. }
  22. #images{
  23.     visibility:hidden;
  24. }
  25. #loading{
  26.     margin-top:50px;
  27.     text-align:center;
  28.     width:100%;
  29. }
  30. #loading img{
  31.     margin-top:10px;
  32.     position:relative;
  33. }
  34. #captions{
  35.     position:relative;
  36.     text-align:center;
  37.     z-index:10000;
  38. }
  39. #scrollbar{
  40.     visibility:hidden;
  41.     position:relative;
  42.     border-bottom:1px solid #b3b3b3;
  43.     z-index:10001;
  44. }
  45. #scrollbar_slider{
  46.     position:absolute;
  47.     margin-top:-7px;
  48.     margin-left:-7px;
  49.     z-index:10002;
  50.     background-image:url(slider.png);
  51.     background-repeat:no-repeat;
  52.     width:14px;
  53.     height:14px;   
  54. }
  55. #imageflow{
  56. background-color:#000;
  57.     margin-left:350px;
  58.     text-align:left;
  59.         color: #fff;
  60. }
  61. </style>

Por ultimo la estructura de nuestra galeria

PLAIN TEXT
HTML:
  1. <div id="imageflow">
  2.     <div id="loading">
  3.         <b>Loading images</b><br/>
  4.         <img src="loading.gif" width="208" height="13" alt="loading" />
  5.     </div>
  6.     <div id="images">
  7.         <img src="img/img001.png" alt="Image 1" />
  8.         <img src="img/img002.png" alt="Image 2" />
  9.         <img src="img/img003.png" alt="Image 3" />
  10.         <img src="img/img002.png" alt="Image 4" />
  11.         <img src="img/img003.png" alt="Image 5" />
  12.         <img src="img/img001.png" alt="Image 6" />
  13.         <img src="img/img002.png" alt="Image 7" />
  14.         <img src="img/img003.png" alt="Image 8" />
  15.         <img src="img/img002.png" alt="Image 9" />
  16.         <img src="img/img001.png" alt="Image 10" />
  17.     </div>
  18.     <div id="captions"></div>
  19.     <div id="scrollbar">
  20.         <div id="slider"></div>
  21.     </div>
  22. </div>
  23.  
  24. <div class="clear"></div>

Compartelo

  1. User Gravatar

    Slideflow - AJAX Gallery | Infected-FX| tutoriales, recursos y referencias para desarroladores y diseñadores web said,

    Wrote on January 1, 2008 @ 21:19

    [...] un tiempo en xybernéticos habían mostrado una galería llamada ImageFlow ó MooFlow, ahora nos encontramos con otra [...]

  2. User Gravatar

    leny said,

    Wrote on January 26, 2008 @ 22:09

    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.

  3. User Gravatar

    jane said,

    Wrote on February 21, 2008 @ 15:40

    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

  4. User Gravatar

    Niennor said,

    Wrote on April 7, 2008 @ 11:27

    Saludos!

    No sé si me puedes comentar respecto a la compatibilidad en IE6, si sabes algo por favor comentamelo!
    Muchas gracias desde ya.

  5. User Gravatar

    Iván said,

    Wrote on August 14, 2008 @ 3:57

    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 :)

Seguir comentarios por RSS · TrackBack URI

Nombre: (Necesario)

E-mail: (Necesario)

Website:

Comment: