Crear una galería de imágenes en movimiento con JQuery y jCarousel

Galería de imagenes en movimiento con JQuery

Ya tenía mucho que no escribía algo de diseño web/programación así que hoy es el día indicado para hacerlo. Recientemente he terminado una página web que hice a una inmobiliaria de Mexicali, donde me pidieron que metiera una galería de imágenes debajo del contenido del sitio con unas imágenes de unas casas que estuvieran moviéndose infinitamente.

El cliente me dijo que las hiciera con Flash, pero como odio el flash y ya casi no recuerdo como se usa, le sugerí otra cosa y mi alternativa fue utilizar un plugin de JQuery llamado JCarousel lite que hace lo que el quería y más.

El plugin esta muy bien documentado en la pagina de los creadores, así que explicaré lo básico para poder utilizarlo en cualquier pagina web y evitar el flash.

Lo primero que debemos hacer es descargar el script de JCarousel desde la página oficial y ponerle un nombre como jcarousel.js (descargar)

Como JCarousel depende de JQuery debemos descargarlo también, en mi caso utilice la API JQuery de Google para no descargarlo.

Ahora ya que sabemos estas dos cosas vamos a crear un documento HTML y vamos a llamar primero a estos 2 scripts dentro del archivo HTML colocando este código antes de la etiqueta < body >.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script><script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script>


Debe quedar algo así

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Lo siguiente es crear un DIV contenedor al que le vamos a decir que nuestra galería se mostrará en movimiento automáticamente. Y dentro de este tendremos otro DIV que dará formato a nuestras listas de imágenes.

Ahora lo que debemos hacer es meter una lista UL con todos los LI que necesitemos, estos últimos son los que van a contener las imágenes.

Debe quedar así

Ahora, debemos decirle a JCarousel con javascript que nuestra galería cambiara las imágenes automáticamente cada cierto tiempo, que mostrará solo una lista de 3 imágenes al mismo tiempo y la velocidad en la que serán mostradas.

Para hacer eso debemos copiar y pegar el siguiente script justo debajo de la etiqueta que cierra el último DIV.

<script type="text/javascript">// <![CDATA[
$(".auto .jCarouselLite").jCarouselLite({
    auto: 300,  
    visible:5  
    speed: 1500,
});
// ]]></script>

Una vez hecho todo esto nuestra galería de imágenes ya debe verse bien, si quieren saber mas sobre otras opciones les recomiendo lean la documentación de la pagina del autor, ahí encontrarán otros ejemplos y otras variables para modificar y visualizar su galería de otras formas.

Demo con dos ejemplos que hice : Jcarousel
Descargar archivos del ejemplo: Jcarousel

16 Comentarios

  1. pulgatomika 13 septiembre 2010
    • danielmd 13 septiembre 2010
      • danielmd 13 septiembre 2010
      • elkin 24 octubre 2013
  2. pulgatomika 13 septiembre 2010
    • danielmd 13 septiembre 2010
  3. pulgatomika 15 septiembre 2010
  4. axinedd 5 octubre 2010
    • danielmd 5 octubre 2010
    • como si se tratara de una imagen.

      A ver si puedo hacer un tutorial

  • draco 3 noviembre 2010
  • eleccia 11 septiembre 2011
  • Marta 7 diciembre 2011
  • Chech 23 febrero 2012
  • johan 5 febrero 2013
  • Deja un comentario