Utilización de JQuery Cycle Plugin

Tengo pensado para más adelante escribir una entrada más detallada sobre JQuery, una librería JavaScript que nos facilita enormemente la integración de dicho lenguaje en nuestra página. Sin embargo me adelanto con esta pequeña entrada que describe la utilización de uno de sus plugins.

Una de las características destacables de JQuery es la existencia de multitud de plugins, para incorporar una gran variedad de efectos y funcionalidades a nuestro código HTML.

En esta entrada presento el plugin Cycle, que como podéis ver en su página logra unos efectos espectaculares para rotar un contenido (imágenes es lo más habitual, aunque se pueden rotar otros contenidos).

Estaba yo intentando adaptar uno de dichos efectos a un pequeño proyecto. Añadía los enlaces a los ficheros JavaScript en la cabecera:

<script type="text/javascript" src="./js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="./js/jquery.cycle.all.min.js"></script>

Definía el contenido a rotar dentro de un div con id determinada. En este caso el contenido eran varios divs con imágenes y texto cada uno:

<div id="rotar">
<div>
<image height="135px" width="180px" src="image1.gif"/>
<b>Test1</b>
Texto de primera nota.</div>
<div>
<image height="135px" width="180px" src="image2.gif"/>
<b>Test2</b>
Texto segundo</div>
</div>

Y finalmente llamaba a la función cycle() dentro del $(document).ready(function() { como es habitual en JQuery:

$(document).ready(function() {
	$('#rotar').cycle({
		fx:     'scrollUp',
		timeout: 6000,
		delay:  -2000
	});
});

Pero no conseguía que funcionara. Me centraba en la llamada a la función cycle(), pero finalmente descubrí el problema…

Parece que determinados efectos de cycle() entre ellos scrollUp que es el que yo pretendía usar necesitan que esté definida la altura en el contenido a ciclar. Por lo tanto modifiqué el CSS de mi proyecto para añadir dicha altura y todo perfecto:

#rotar {
	height: 230px;
}

Hasta aquí la presentación de este gran plugin, con la solución a este pequeño problemilla incluida.

¡Hasta la próxima!