JQuery Cycle: plugin para realizar slideshows
Jueves 6 de Mayo, 2010
0 comentarios
Supongo que varias veces te has topado con el problema de generar un slideshow, se usa bastante en galerías de imágenes, para realizar transiciones con datos, para rotar entre banners publicitarios, etc. Con el plugin JQuery Cycle esta tarea se ha vuelto realmente simple.
JQuery Cycle es capaz de realizar transiciones entre todos los elementos que sean “hijos” (a nivel de DOM) del elemento que le indiques, de esta forma si tienes un div que contiene un listado de imágenes lo que obtendrás será un slideshow con esas imágenes, pero lo interesante es que no sólo se restringe a imágenes, sino que también podrías tener un div con muchos divs dentro y las transiciones las haría entre esos divs, incluso no tienen por qué ser elementos HTML del mismo tipo, perfectamente podrías tener transiciones que involucren divs, imagenes, párrafos, etc.
Otro punto a favor es que resulta extraordinariamente simple de usar.
¿Cómo usar JQuery Cycle?
Lo primero que debes hacer es descargarlo, puedes hacerlo desde el sitio oficial, dentro del zip que descargarás se encuentran varias versiones de la librería, te recomiendo la jquery.cycle.all.min.js ya que por un lado incluye todas las opciones y transiciones y por otro es la versión comprimida por lo que cargará algo más rápido que la versión sin comprimir. Una vez descargado y subido a tu servidor donde estés alojando tu proyecto debes incluirlo como cualquier otro archivo js, recuerda que este plugin requiere JQuery (desde la versión 1.2.6 en adelante).
<head> ... <!-- JQuery debe estar disponible, recuerda que puede ser cualquier versión desde la 1.2.6 --> <script src="path_jquery/jquery-1.4.2.min.js"></script> <!-- Luego agregamos JQuery Cycle --> <script src="path_jquerycycle/jquery.cycle.all.min.js"></script> ... </head>
Ahora nos preocuparemos de tener un div que elegiremos como contenedor para nuestro slideshow, recuerda que este div debe contener todos los elementos que desees integren este slideshow.
<div id="mi_slideshow"> <img src="imagen_1.jpg" /> <img src="imagen_2.jpg" /> <img src="imagen_3.jpg" /> <!-- Tantas imágenes como quieras --> <img src="imagen_n.jpg" /> </div>
Bien, ya tenemos disponible Jquery Cycle, tenemos el contenedor para el slideshow y también el contenido que debe presentarse. Ahora llegamos a la parte “difícil”: hacer que funcione. Es justamente en este momento cuando te das cuenta que JQuery Cycle es maravilloso.
<script type="text/javascrip">
$(document).ready(function(){
$("#mi_slideshow").cycle({
fx: 'fade'
});
});
</script>
Y listo, tendrás todas las imágenes desplegándose una tras otra con un efecto de transición fade, al terminar la lista volverá a la primera. Ahora hay muchas otras opciones para personalizar tu slideshow, por ejemplo:
<script type="text/javascrip">
$(document).ready(function(){
$("#mi_slideshow").cycle({
fx: 'scrollHorz', //la transición será de desplazamiento horizontal
timeout: 5000, // milisegundos antes de iniciar la siguiente transición, si es 0 la animación no se iniciará automáticamente
prev: "#prev", //id que funcionará como botón para pasar al slide anterior
next: "#next" //id que funcionará como botón para pasar al siguiente slide
});
});
</script>
Son muchas más las opciones que están disponibles, para conocerlas todas puedes ver leer la documentación. Te recomiendo este plugin por tener una mezcla muy conveniente entre facilidad de uso y nivel de personalización soportada. Además incluye muchísimas animaciones para las transiciones, pero si no te son suficientes también puedes crear tus propias animaciones.
Más información en la web oficial de JQuery Cycle.
