Tupale

Carrusel jQuery compatible con Sexy LightBox

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&oacute;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&oacute;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&oacute;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&oacute;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&oacute;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&oacute;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&oacute;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&oacute;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:

Descargar carousel.js
Descargar jquery.js

Listo ya tienes tu Carrusel compatible con Sexy LightBox usando la libreria de javascript jQuery.

6 comments for “Carrusel jQuery compatible con Sexy LightBox

  1. Ricardo
    25 junio, 2011 at 1:42 AM

    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.

    • 25 junio, 2011 at 8:07 AM

      Si, definitivamente pienso seguir con tutoriales de blacberry y probablemente agregar algunos de android.
      Gracias por seguir el blog. xD

  2. kristell
    14 octubre, 2011 at 3:10 AM

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

  3. 8 diciembre, 2011 at 12:54 PM

    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.

  4. rick
    21 febrero, 2012 at 7:39 AM

    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?

  5. 27 febrero, 2012 at 4:05 PM

    Lo había olvidado, la contraseña es
    tupale.org

Deja un comentario

A %d blogueros les gusta esto: