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:
[sourcecode language="html"]
[/sourcecode]
CSS:
[sourcecode language="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
}
[/sourcecode]
JavaScript:
[sourcecode language="javascript"]
$('#s1').cycle('fade');
[/sourcecode]
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.
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:
[sourcecode language="html"]
[/sourcecode]
CSS:
[sourcecode language="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
}
[/sourcecode]
JavaScript:
[sourcecode language="javascript"]
$('#s1').cycle('fade');
[/sourcecode]
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.
hola, que tal será voy probarlo ps!
ResponderEliminarNo 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
ResponderEliminarNo funciona, deberias dejar el archivo completo para su descarga
ResponderEliminarGracias de todas maneras!
ResponderEliminarHola, yo acabo de probar la descarga y funciona correctamente.
ResponderEliminarEl link para la descarga lo tienes aquí:
http://malsup.com/jquery/cycle/download.html
Muchas gracias es perfecto justo lo que necesitaba ya lo probe y anda de lujo, un millon de gacias y bendiciones.
ResponderEliminarPara 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.
lo he probado pero sol a medias y me parece interesante ; espero sigas publicando mas en este post
ResponderEliminarImplementacion de Cycle animada - Full html
ResponderEliminarhttp://www.laqueva.com.ar/deepdemon/tarjetas-puevlo/index.php