Utilización de JQuery Cycle Plugin

16 septiembre 2008 at 6:19 pm 7 comentarios

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!

Anuncios

Entry filed under: Javascript. Tags: , , .

Logs en Java Seguimos en el aire

7 comentarios Add your own

  • 1. Phill  |  18 octubre 2008 en 2:35 pm

    Hola Miguel,

    Llevo un buen rato comiéndome la cabeza, tengo pensado poner un efecto de fade en las imágenes de la cabecera (ahora solo rotan aleatoriamente al recargar la pagina….). Me pierdo cuando explicas la forma de “llamar a la función”…. podrias explicar un poco mejor todos los pasos… no hay ni un solo manual en español y en condiciones de como hacer funcionar jquery cycle…

    Saludos

    Por cierto, ¿que plugin usas para mostrar el código?

  • 2. Phill  |  18 octubre 2008 en 3:35 pm

    Uff ya lo hice funcionar, pero me di cuenta de que resulta contraproducente, ralentiza la carga de la pagina ya que debe cargar todas las imágenes del tirón y son un poco pesadas. No se si habrá una solución para que cargue las imágenes según surge.

    De todas formas decirte que tu entrada es correcta y que es realmente fácil hacer que funcione, el error era mio ya que no enlace bien a las librerías y al plugin… Ya sabes, los errores mas comunes suelen ser los mas tontos.

    Saludos

  • 3. Miguel  |  18 octubre 2008 en 4:34 pm

    Pues no me ha dado tiempo de contestarte… me alegro de que lo consiguieras.

    La carga de las imagenes efectivamente se hace todo al inicio. En mi caso no eran imágenes muy pesadas y no tuve problema. Si veo algo que te pueda servir te lo haré saber.

    En cuanto al plugin para mostrar código, mi blog está alojado en wordpress y lo que utilizo es esto aunque no sé si en un wordpress instalado viene “de serie”.

    Gracias por tus comentarios y me tomaré más tiempo para visitar tu blog, que sólo le he podido echar un vistazo pero merece una visita más calmada.

  • 4. Phill  |  18 octubre 2008 en 5:37 pm

    Gracias Miguel,

    Yo estoy utilizando un plugin llamado iG:Syntax Hiliter para mostrar y colorear código, como puedes ver los resultados no son muy satisfactorios, le echaré un vistazo a el script que usa wordpress.com… en las instalaciones privadas de wordpress no incluye dicha opción.

    Saludos

  • […] 29 Enero 2009 Una de las maneras, quizás la más utilizada, de emplear jQuery es siguiendo los ejemplos del plugin que queramos utilizar, como hice en este mismo blog en “Utilización de jQuery cycle plugin“. […]

  • 6. C_Tapia  |  15 abril 2009 en 7:49 pm

    Quiero implementar jquery cycle, pero la verdad es que no sé como carga las fotos, y todo eso. Si alguien me puede ayudar se lo agradezco de antemano.

  • 7. Miguel  |  16 abril 2009 en 1:24 pm

    C_Tapia, ¿has intentado hacer lo que pone en la entrada?. Es que no tiene mucho más secreto.

    Las imágenes como comenta Phill se cargan todas al inicio y puede ser algo lento. Segunda vez que sale el tema, a ver si busco una solución.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Mi perfil

View Miguel Orbegozo's profile on LinkedIn

Feedjit

Feeds

Otros…

BlogESfera Directorio de Blogs Hispanos - Agrega tu Blog

Bitacoras.com

Add to Technorati Favorites


A %d blogueros les gusta esto: