Slideshow de imágenes con JQuery Cycle Plugin

Algo que me sucedía a menudo era necesitar una galería o slideshow en Javascript  para algún sitio y cuando buscaba no encontraba ninguno que se ajustara a mis requerimientos. Es bastante común recorrer sitios webs donde los ejemplos de los scripts parecen funcionar bárbaro pero luego, al probarlos darnos cuenta que en algunos navegadores no funcionan o que son muy poco adaptables.

Pero desde hace un tiempo descubrí JQuery Cycle Plugin que se utiliza para hacer transiciones y animaciones entre imágenes y me solucionó gran parte de mis problemas. Es simple y me ha funcionado bastante bien.

El plugin lo pueden descargar de aquí: JQuery Cycle Plugin. El ejemplo que voy a mostrar es muy básico puesto que no me interesa ahondar mucho en los efectos y opciones de configuración así que si buscan más información acerca de cómo funciona la pueden encontrar en JQuery Cycle Plugin Overview.

Lo que voy a hacer a continuación pueden verlo ejemplificado aquí: Slideshow con JQuery Cycle Plugin

El código HTML del Slideshow

Como ven en el <head></head> se carga primero el archivo de JQuery, luego el plugin JQuery Cycle All que es el que permite realizar las transiciones y animaciones.

Observen el cuerpo. Hay dos vínculos que son opcionales y se pueden usar como disparadores o triggers para ir pasando las imágenes. Si desean usarlo deben especificarles un valor en el atributo id y apuntar el href a #.

Debajo, aparece el div contenedor de la galería cuyo id hay que definir; puede ser cualquiera. También es posible asignarle una clase para darle estilo CSS.

Dentro del div irán las imágenes de nuestro slideshow. Además de especificar la ubicación con src, es necesario definir el ancho y el alto con width y height.

Ahora volvamos al head

Como siempre, los scripts en JQuery van luego de $(document).ready para esperar que cargue todo el DOM. El selector de JQuery apunta al elemento cuyo id es galeria así que estará seleccionando el div contenedor. Luego, se especifican las opciones. prev y next son para indicarle al plugin cuáles serán los botones para cambiar las imágenes. timeout para controlar el tiempo entre cada pasada en caso de estar en automático.

Este plugin tiene muchas más opciones y distintos efectos. Eso último puede resultarle útil a algunos. Tienen que usar la propiedad fx y elegir (poniéndolo entre comillas) alguno de los siguientes efectos: blindX, blindY, blindZ, cover, curtainX, curtainY, fade, fadeZoom, growX, growY, scrollUp, scrollDown, scrollLeft, scrollRight, scrollHorz, scrollVert, shuffle, slideX, slideY, toss, turnUp, turnDown, turnLeft, turnRight, uncover, wipe, zoom.

Al ser combinados con otras opciones como velocidad y tiempos dan efectos vistosos e impactantes. Yo igual prefiero el efecto básico de transición.

Este script necesita combinarse con algo de CSS para funcionar. Veamos la hoja de estilo

Hay algunos ítems necesarios como los display, pero en base a este código es posible hacer una modificación y convertir el estilo de la galería en lo que necesiten. Es cuestión de probar y si lo hacen no olviden chequear la compatibilidad en todos los navegadores.

Soy programador web y me desempeño como Líder Técnico y de Proyectos en Polar Bear Development. Trabajo con tecnologías como PHP, Javascript, MySQL y HTML5 para el desarrollo de sitios y sistemas web. Me especializo en Zend Framework 2 y otros frameworks MVC, como también en WordPress y otros CMS. Lidero equipos de desarrolladores trabajando con Scrum. Vivo en Buenos Aires, Argentina.
 

9 thoughts on “Slideshow de imágenes con JQuery Cycle Plugin

  1. Hola gracias por la información, quería preguntarte si jquery y el plugin cycle se pueden usar libremente o hay que solicitar alguna licencia? saludos y muchas gracias.
    Flabio

  2. Hola… Estoy utilizando el plugin cycle de jquery y todo funciona muy bien… hasta que intento modificar las fotos con el editor JCE de Joomla, ya que agrega al código html los tags de a cada imagen y así no funciona.
    Yo lo hice con el editor de codigo puro, pero mi cliente tiene que hacer las actualizaciones con un editor amigable.
    YA intenté “limpiar” el código html con una opción del editor, pero siempre agrega los tags de párrafo! 🙁
    Alguna idea para resolver esto ? De ante mano, mil gracias

  3. Hola Rosa

    No conozco el editor JCE de Joomla, pero por lo que veo, es parecido al editor de WordPress. Sin ver el código, se me ocurren dos posibilidades: investigar el editor para que no agregue esas etiquetas adicionales o jugar con el selector de JQuery a la hora de asignar el plugin. Mediante el Inspector de Google Chrome o Firebug en Firefox, puedes ver el código fuente e identificar qué etiquetas se están agregando. Luego modificar el selector en el código Javascript de acuerdo a lo que te haya agregado el editor JCE.

    Espero haberte ayudado.
    Saludos

  4. Hola:

    Tengo un slider hecho en jquery. El problema que tengo, es que las imágenes pasan demasiado rápido y quiero hacer más lento su paso. este es el código:

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    ¿Puedo agregarle alguna Variable?

    Gracias;

  5. Hola:
    Tengo dos códigos jquery, que son diferentes. Uno es para un banner de imágenes que pasan en línea y el otro es para abrir una galería.

    Resulta que los dos códigos interfieren el uno con el otro, he colocado la variable: var j = jQuery.noConflict(); en el código de la galería, pero el otro no me funciona. Estos son los dos códigos:

    Galería:

    var j = jQuery.noConflict();
    jQuery(function() {
    jQuery(‘#gallery a’).lightBox();
    });

    Banner

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    ¿Cómo hago para que ambos fe funcionen? Gracias;

  6. Hola Claudia
    Tenés que revisar las opciones del plugin que estás usando. Seguramente hay alguna que te permite manejar la velocidad. La sintaxis será algo similar a los siguiente:
    $(‘#slider’).nivoSlider({
    speed: 100
    });

    Espero haberte orientado
    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


*