jQuery Cycle en drupal es como el jamón en la trucha a la navarra

Hace tiempo que no me pasaba por esta cocina, es lo malo que tiene ser un profesional (en el sentido de que te contratan) y es que tienes ir a las cocinas de otros.

El titulo tiene su gracia ya que soy vegetariano, pero se que el jamón de la trucha a la navarra es el punto gracioso, salado y sabroso. También tiene sus riesgos, no es lo mismo un jamón que un JAMÓN, osea que si eres un poco cutre y metes un jamón cutre la trucha quedara cutre. Con jQuery y sus plugins puede pasar algo del estilo, si te pasas el plato de drupal pude indigestar a más de uno.

JQuery cycle es una joya que permite hacer ciclos entre elementos diferentes de nuestro html, de una forma muy sencilla.

Con este plugin se pueden hacer de forma muy sencilla presentaciones con imágenes y permite un control total en los efectos, eventos y tiempos.

Para que esto funcione en drupal necesitamos varios ingredientes, jquery_upate, jquery_plugin.

http://drupal.org/project/jquery_update Este modulo permite tener una versión más actualizada del jquery en nuestro drupal, la instalación es sencilla pero en la versión de drupal 5 tiene un punto un tanto raro, una vez descargado y descomprimido el modulo hay un directorio misc con una serie de ficheros .js copiar estos ficheros al directorio misc de nuestro drupal.

http://drupal.org/project/jquery_plugin Este modulo es muy sencillo, nos permite añadir plugin de jquery en nuestros módulos de una forma muy sencilla incluso en el módulo hay unos plugins para probar, entre ellos el cycle.

Este seria el html con el div donde colocamos las imágenes (este ejemplo esta sacado de aquí )

<div 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>

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

jquery_plugin_add($plugin)<br>

 jquery_plugin_add('cycle');

Esta llamada la tendremos que hacer desde un módulo propio o lugar similar :)

$(document).ready(function() {
$('.pics').cycle({
    fx: 'fade'
 });
});

Ahora tendré esto jquery_plugin_add('cycle'); mas esto jquery_plugin_add('imagenes');

Es un método un tanto artesanal además tenemos un modulo slideshow_creator que también se basa en el cycle, pero a mi me resulto excesivo para según que situaciones. Además usando el modulo jquer_plugin nos permite tener una técnica para incorporara mas plugins de jQuery a nuestro drupal

Espero que os guste este plato, y si ya se que tengo pendiente varias partes del tutorial de jquery y drupal, llegara seguro que llegara.