Carrusel jQuery compatible con Sexy LightBox
junio 17, 2010 in Tutriales
Muchas veces quise implementar un carrusel de imágenes similar al que esta en la portada de Tupale y simultaneamente usar el script de Sexy LightBox sin embargo debido al uso de las librerías jQuery generalmente entran en conflicto y dejan de funcionar.
Pues me puse a hacer la tarea y aquí les tengo el carrusel jQuery compatible con Sexy LightBox pero solo la versión que también utiliza jQuery, no he podido hacerlo con la versión Mootolz.
Comencemos primero con el codigo HTML, el siguiente código debe ir en tu Header entre las etiquetas <head> y </head>. Los archivos js que se mencionan en el código se pueden descargar al final de este articulo.
<script src=”jquery.js” type=”text/javascript”></script> <script src=”carousel.js” type=”text/javascript”></script>
<script type=”text/javascript”>// <![CDATA[
stepcarousel.setup({ galleryid: 'carousel', beltclass: 'belt', panelclass: 'panel', autostep: {enable:true, moveby:1, pause:3000}, panelbehavior: {speed:500, wraparound:true, persist:true}, statusvars: ['statusA', 'statusB', 'statusC'], contenttype: ['external'] })
// ]]></script>
Luego este código que debes colocar en tu body o cuerpo de la pagina, entre las etiquetas <body> y </body>
<div id=”carousel”>
<div>
<div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div><div><p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p></div><div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p></div></div></div><div id=”carousel”> <div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> <div> <p><img src=”img1.png” width=”52″ height=”52″ />Este carousel es una demostración</p> </div> <div><p><img src=”img2.png” width=”52″ height=”52″ /> tutorial de <a href=”http://tupale.org”>Tupale.org</a>.</p> </div> </div></div>
Ahora entramos con la parte de personalización, el CSS, a traves de este código podrás modificar la apariencia y tamaño de tu carrusel para que se acomode a tus necesidades. Recuerda que es código CSS.
#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 60px;
}#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 0px;
padding:7px;
}
Listo, ya tienes tu carrusel, pero faltan los botones para avanzar y retroceder el carrusel, esto lo haces con una función javascript llamada desde un enlaces que se lo puedes asignar a cualquier elemento, aqui te dejo el codigo de cada uno de los botones.
<a href=”javascript:stepcarousel.stepBy(‘carousel’, 1)”>adelante</a>
<a href=”javascript:stepcarousel.stepBy(‘carousel’, -1)”>atras</a>
Los archivos JS necesarios puedes descargarlos aqui:
Listo ya tienes tu Carrusel compatible con Sexy LightBox usando la libreria de javascript jQuery.
Ricardo said on junio 25, 2011
Hola. Me he encontrado con tu blog, el cual me parece muy bueno (espero continúes con el tutorial para las apps de BlackBerry) y me preguntaba si podrías colocar un ejemplo del este carrusel con el lightbox. Estoy buscando hacer lo mismo para una web!!!. Gracias. Abrazos.
Kalvin Manson said on junio 25, 2011
Si, definitivamente pienso seguir con tutoriales de blacberry y probablemente agregar algunos de android.
Gracias por seguir el blog. xD
kristell said on octubre 14, 2011
hola, al intentar finalizar esta parte tengo un problema en el carousel ya que no esta tomando los estilos, podrías explicar mas a detalle este paso, gracias??
mcarmen said on diciembre 8, 2011
Hola! muy bueno el tutorial, me viene de perlas para una pagina web que me han encargado, lo malo es que no me funciona al 100% el ejemplo. Yo también te pido si pudieses colgar un ejemplo del este carrusel con el lightbox para ver bien en detalle como lo has logrado.
Mil gracias.
rick said on febrero 21, 2012
me dice que el sexy light box esta enryptado y me pide la contrasena a la hora de querer expandir el rar… me podrias dar la contra?
Kalvin Manson said on febrero 27, 2012
Lo había olvidado, la contraseña es
tupale.org