domingo, 26 de abril de 2009

Thickbox una alternativa a Lightbox sobre JQuery

Una de mis bibliotecas favoritas es Lightbox 2, la he utilizado en muchas ocasiones, pero cuando empecé a incluir JQuery en mis proyectos me encontré con un problema: Lightbox trabaja sobre scriptaulous y ocupa más de 180 Kb. Si a esta biblioteca ya de por sí pesada sumamos JQuery -que suelo utilizar para añadir algún efecto y porque utilizo JQuery Validator y JQuery Date Picker-, nos encontramos con una página lenta, pesada y que va a consumir una cantidad de recursos sencillamente prohitiva. La solución es buscar un plugin para JQuery que me de lo mismo que Lightbox -o parecido, sigue pareciéndome el más conseguido-. Hay versiones de Lightbox para JQuery, pero no tienen la elegancia que se busca al utilizar un plugin así.
De modo que hay que cambiar la marca si se quiere trabajar con JQuery y lo mejor que he encontrado es Thickbox.
El uso de este plugin para JQuery es muy sencillo, basta con incluir JQuery y el código de Thickbox (JavaScript y CSS):

<style type="text/css" media="all">
@import "template/css/stylesheet.css";
@import "js/thickbox.css";
</style>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

Thickbox funciona sobre los enlaces, de modo que será en los elementos <a /> donde especificaremos mediante el atributo class que queremos enlazar con una imagen ampliada, y utilizaremos el atributo rel para agruparlas en galerias:

<a href = "imagengrande1.jpg" class = "thickbox" rel = "galeria1">
<img src = "thumbnaiil1.jpg" alt = "Img 1"/>
</a>
<a href = "imagengrande2.jpg" class = "thickbox" rel = "galeria1">
<img src = "thumbnaiil2.jpg" alt = "Img 2"/>
</a>
<a href = "imagengrande3.jpg" class = "thickbox" rel = "galeria2">
<img src = "thumbnaiil3.jpg" alt = "Img 3"/>
</a>
<a href = "imagengrande4.jpg" class = "thickbox" rel = "galeria2">
<img src = "thumbnaiil4.jpg" alt = "Img 4"/>
</a>

No hay comentarios: