En el Taller de jQuery os tenemos acostumbrados a explicar cómo realizar diversos efectos y componentes para páginas web, pero en este caso no vamos a contaros cómo realizar un plugin, sino como utilizar uno que ya está publicado.

Este plugin que vamos a tratar, llamado jQuery lightBox, sirve para hacer una caja modal, en la que se presenta una imagen, oscureciendo el resto de la página, para que resalte aun más. El usuario podrá ver la imagen de cualquier tamaño en una capa que se superpone al contenido de la web y además, navegar hacia delante o atrás entre otras imágenes asociadas al plugin.

En este caso os enseñamos el plugin, en vez de comentar cómo se realiza porque no es un trabajo nuestro y simplemente me he limitado a ponerlo en marcha, no a estudiar cómo se ha desarrollado. Lo he elegido por estar bastante bien hecho y con funcionalidades que me han venido muy bien en un trabajo que estoy haciendo para un amigo. Como me parece muy útil he decidido explicar en español cómo utilizarlo, aunque veremos que es todo muy sencillo.

Contenido de la descarga de lightBox

El archivo de descarga contiene varios directorios:

• Carpeta "js", con el código Javascript y el framework jQuery.
• Carpeta "css", con las hojas de estilo CSS necesarias para que todo se vea correctamente.
• Carpeta "images", con varias imágenes que necesita el plugin
• Carpeta "photos", con algunas fotos para el ejemplo que realmente no necesitaremos cuando queramos utilizar el plugin en nuestra página web. Solo está ahí para utilizarse en el ejemplo que acompaña la descarga.

Además contiene un archivo llamado index.htm con un ejemplo para ver el plugin funcionando. A partir de ese ejemplo puedes comprobar, si tienes una mínima idea de Javascript y jQuery, lo fácil que es iniciar el plugin, pero si no la tienes, sigue estos pasos que te voy a relatar.

Pasos para poner en marcha el plugin lightBox

Si deseas poner en marcha este plugin tendrás que realizar una serie de pasos sencillos.

1.- Copia en tu sitio web las carpetas "js", "css" e "images". En principio da igual dónde lo coloques todo, pero acuérdate de donde lo has puesto, porque luego vas a tener que enlazar varios de los archivos que hay en estas carpetas y tendrás que utilizar las rutas correctas.

2.- Enlaza los archivos Javascript y CSS. Esto lo consigues con algunas etiquetas SCRIPT (para los archivos Javascript) y LINK (para enlazar la declaración CSS).

Primero tienes que incluir jQuery:

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>

Luego has de incluir el script del lightBox:

<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>

Ahora las hojas de estilo CSS:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

3.- Crea el HTML necesario para que tu lightBox funcione. Esta parte es muy sencilla de realizar, al alcance de cualquier persona que tenga mínimos conocimientos de HTML. Pero también es clave que crees una estructura de código HTML compatible con el lightBox. Esto es muy simple:

Creas una capa principal y le pones un identificador:

<div id="micapaimagenes">

</div>

Luego, dentro de esa capa, colocas varias imágenes con etiquetas IMG y en cada una de ellas colocas un enlace a la foto grande que quieres que aparezca cuando se haga clic sobre la imagen.

<a href="imagen_grande.jpg">
   <img src="imagen_pequena.jpg">
</a>

Colocas tantas imágenes pequeñas, con enlaces a imágenes grandes, como desees. El código HTML es bien simple, como has podido ver. Al final te quedaría algo como esto:

<div id="imagenesproducto">
   <a href="archivoimg/1-amp.png" class="lightbox">
      <img src="archivoimg/1.png">
   </a>
   <a href="archivoimg/2-amp.png" class="lightbox">
      <img src="archivoimg/2.png">
   </a>
   <a href="archivoimg/3-amp.jpg" class="lightbox">
      <img src="archivoimg/3.jpg">
   </a>
</div>

4.- Invoca el plugin lightBox con jQuery. Para que ahora esas imágenes se comporten como elementos dinámicos y se abra una caja modal para mostrar las ampliaciones de las fotos, tienes que invocar al plugin. Esto se consigue con el siguiente código Javascript:

<script language="javascript">
$(document).ready(function(){
   $('# imagenesproducto a').lightBox();
});
</script>

Así de simple. Con esto el plugin jQuery se encargará de todo el trabajo y aplicará el comportamiento dinámico en tus imágenes.

Otras estructuras de HTML

Si sabes un poco de Javascript, a partir de otros selectores jQuery podrás crear códigos HTML distintos, con estructuras adaptadas a tus necesidades, pero donde también funcione tu lightBox.

Antes, colocamos todos los enlaces dentro de una capa específica, con un identificador para referirnos a ella desde jQuery. Otra estructura más versátil sería ponerles a todos los enlaces una clase CSS y así podemos tener cualquier estructura de código HTML en nuestra página web. Luego, podríamos utilizar esa clase CSS de los enlaces para transformarlos en cajas lightBox:

<a href="archivoimg/1-amp.png" class="lightbox">
   <img src="archivoimg/1.png">
</a>
... luego cualquier pedazo de código HTML ...
<a href="archivoimg/2-amp.png" class="lightbox">
   <img src="archivoimg/2.png">
</a>
... otro pedazo de código HTML con todas las etiquetas que desees entre medias de cada enlace ...
<a href="archivoimg/3-amp.jpg" class="lightbox">
   <img src="archivoimg/3.jpg">
</a>

Luego podrías llamar al plugin con este código jQuery:

$("a.lightbox").lightBox();

Eso es todo! para acabar, voy a dejarte un enlace a un ejemplo en marcha, donde verás varias imágenes que se pueden pulsar para acceder a la imagen ampilada en una caja modal.

Rutas de las imágenes adelante y atrás, cerrar, etc.

Actualizo el artículo para comentar un tema importante. Se trata que el plugin usa varias imágenes para poner enlaces a la foto siguiente y anterior y para cerrar la capa de la ampliación, para mostrar el típico "loading", etc. Esas imágenes en tu aplicación web pueden estar en rutas diferentes a las que el plugin propone, o incluso puedes llamar al plugin desde diversas páginas en las que las rutas a ellas no te funcionan tal como está configurado el plugin por defecto.

En esos casos existe una cómoda manera de modificar las rutas. Para ello tenemos que abrir el archivo Javascript del plugin, en la versión no minimizada, que en la versión con la que estoy trabajando se llama "jquery.lightbox-0.5.js". Allí encontraréis unas líneas de código que generan una serie de variables para las rutas de las imágenes.

imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: 'images/lightbox-btn-prev.gif',
...

Sería simplemente modificar esas variables para definir las rutas correctas a las imágenes en tu sitio web.