jQuery Cycle

jQuery Cycle es un plugin para hacer carruseles muy cómodo y fácil de implementar.

mucha

archivado en: JavaScript / 16 diciembre, 2012

En general, no me gustan las animaciones automáticas en las páginas, como los carruseles o pases de diapositivas, ya que entorpecen la usabilidad de un sitio. Al menos a mí me sucede que me dificultan fijar la atención en otras partes de la página. Es como si alguien me estuviera gritando al oído mientras trato de escuchar una conversación. Además, consumen un montón de recursos del navegador, lo que puede suponer un problema para las máquinas menos potentes.

No ocurre lo mismo cuando la animación comienza por un evento del ratón, por ejemplo al pasar el cursor sobre una imagen. En este caso, sospecho que se incentiva al usuario a investigar la página, ya que el trasteo por las zonas interactivas se «recompensa» con efectos divertidos.

En cualquier caso, los carruseles están de moda, por lo que conviene controlarlos por si un cliente insiste en incluirlos en su web.

Cuando el presupuesto es bajo y no da para programar uno a medida, una buena solución es emplear el plugin jQuery Cycle, de Malsup, que es muy fácil de implementar.

Por pasos...

1. Te bajas el plugin y lo subes al server. Si es un slider muy sencillo, basta con la versión pequeña. En caso contrario, la completa.

2. Se llama al archivo justo después de las CSS, en el <head>. Aunque es mejor cargar los js al final, en este caso interesa que se pongan en marcha cuanto antes.

  • <script src="jquery.cycle.all.js"></script>

3.  En un archivo, por ejemplo, diapositivas.js, se incluye el código jquery correspondiente a la animación que se quiere usar:

  • $(document).ready(function() {
  • $('#mi_slideshow').cycle({
  • fx: 'fade',
  • timeout: '3500'
  • });
  • });

4. Se llama a ese archivo después de haber incluido el plugin

  • <script src="jquery.cycle.all.js"></script>
  • <script src="diapositivas.js"></script>

5. En un contenedor con el mismo id que se ha puesto en el jquery, se ponen las imágenes del carrusel.

  • <div id="mi_slideshow">
  • <img src="slider_d1.jpg" width="300" height="200" />
  • <img src="slider_d2.jpg" width="300" height="200"/>
  • <img src="slider_d3.jpg" width="300" height="200" />
  • </div>

Y ya stá...

Hacerlo en modo responsive es algo complicado, porque al menos hay que especificar la altura de las imágenes, pero se puede definir un width: 100%.

WordPress

Para usarlo en WordPress, una vez subido al server, mejor a un directorio del tema llamado js, es mejor hacer las llamadas en functions.php y solo para las páginas que lo necesiten, como la home. (Y usar jQuery en vez de $).

  • function carga_jqueries() {
  • if ( is_home() ) {
  • wp_register_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.all.js', array('jquery'),false);
  • wp_enqueue_script( 'jquery-cycle' );
  • wp_register_script ('slideshow', get_template_directory_uri().'/js/slideshow.js', array('jquery'),false);
  • wp_enqueue_script( 'slideshow' );
  • }
  • }
  • add_action( 'wp_enqueue_scripts', 'carga_jqueries' );

Hay una segunda versión del plugin, con más posibilidades, que tiene la posibilidad de definir un auto-height. Aún no la he probado, pero tiene una pinta muy interesante.

|| Tags: , , ,

valoración de los lectores sobre jQuery Cycle

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3.2 sobre 5 (5 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.