jQuery Cycle Plugin – Transiciones animadas de imágenes (slideshow)

jQuery Cycle plugin proporciona un mecanismo de hacer transiciones animadas de imágenes. Su implementación está basada en el InnerFade Plugin de Torsten Baldes, el Slideshow Plugin de Matt Oakes, y el jqShuffle Plugin de Benjamin Sterling. El plugin soporta pausas al pasar el ratón por encima de la imágen, paradas automáticas, retrollamadas (callbacks) antes y después, disparadores (triggers) y una gran cantidad de efectos para las trasiciones.

La última versión estable (2.34), publicada en esta misma semana, requiere, como mínimo, la versión 1.2.3 de jQuery.

Es un plugin muy ligero, tan solo ocupa 18 KB en su versión para entornos de producción.

Como casi todo en jQuery, es muy fácil de usar. Aquí pongo un breve ejemplo básico:

HTML:

<div id="s1" class="pics">
    <img src="images/beach1.jpg" width="200" height="200" />
    <img src="images/beach2.jpg" width="200" height="200" />
    <img src="images/beach3.jpg" width="200" height="200" />
</div>

CSS:

.pics {
    height:  232px;
    width:   232px;
    padding: 0;
    margin:  0;
} 

.pics img {
    padding: 15px;
    border:  1px solid #ccc;
    background-color: #eee;
    width:  200px;
    height: 200px;
    top:  0;
    left: 0
}

JavaScript:

$('#s1').cycle('fade');

Puedes acceder a la web oficial para obtener más información, la descarga, ejemplos de códigos fuentes y ejemplos en funcionamiento desde el siguiente enlace:

jQuery Cycle Plugin.

8 Respuestas a jQuery Cycle Plugin – Transiciones animadas de imágenes (slideshow)

  1. Daniel dice:

    hola, que tal será voy probarlo ps!

  2. Fabian dice:

    No puedo hacerlo funcionar, solo cuando creo un nuevo documento pero cuando lo quiero integrar al mi pagina no funciona aparcen todas las imagenes en fila

  3. juyernes dice:

    No funciona, deberias dejar el archivo completo para su descarga

  4. juyernes dice:

    Gracias de todas maneras!

  5. toWerS dice:

    Hola, yo acabo de probar la descarga y funciona correctamente.
    El link para la descarga lo tienes aquí:

    http://malsup.com/jquery/cycle/download.html

  6. Jorge dice:

    Muchas gracias es perfecto justo lo que necesitaba ya lo probe y anda de lujo, un millon de gacias y bendiciones.

    Para los que no pudieron instalarlo descarguen el ejemplo del link que viene el el link de arriba

    jQuery Cycle Plugin.

    ahi viene un ejemplo en HTML de como usarlo.

  7. Jose Flores dice:

    lo he probado pero sol a medias y me parece interesante ; espero sigas publicando mas en este post

Deja un comentario

Fill in your details below or click an icon to log in:

Logo de WordPress.com

You are commenting using your WordPress.com account. Log Out / Cambiar )

Twitter picture

You are commenting using your Twitter account. Log Out / Cambiar )

Facebook photo

You are commenting using your Facebook account. Log Out / Cambiar )

Connecting to %s

Seguir

Get every new post delivered to your Inbox.