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.
