Plugin LightBox en jQuery

  • Por
Cómo utilizar un plugin jQuery para mostrar imágenes en una capa que se superpone al contenido de la página, lo que se conoce como ModalBox o LightBox.
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.

El trabajo está realizado por el desarrollador brasileño Leandro Vieira Pinho y publicado, con link para descarga en la siguiente URL:

http://leandrovieira.com/projects/jquery/lightbox/

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.

Nota: Realmente no hace ni falta tener conocimientos de jQuery para poder instalar y utilizar este plugin, pero puedes aprender jQuery de una manera sencilla en profundidad en el Manual de jQuery de DesarrolloWeb.com.

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.

Nota: He probado y estoy comentando la versión 0.5, que es la que estaba publicada en el momento de escribir este texto. Por lo que pueda pasar (posibles salidas de línea del sitio del creador o cualquier otra falta de disponibilidad) y ya que el contenido está licenciado con Copyleft, os dejo el enlace para descarga de este script en la versión que hoy Leandro ofrece en su propia página web.

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>

Nota: En la propia descarga de lightBox tienes un archivo con el framework Javascript jQuery (jQuery.js) que podrías utilizar, pero la verdad es que está bastante desactualizado. Te recomiendo descargar la versión actual de jQuery, que puedes obtener del propio sitio de jQuery.com, en mi caso estoy utilizando la versión 1.6.1 del framework Javascript y el plugin funciona perfectamente.

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" />

Nota: De nuevo, insisto en que debes fijarte de utilizar las rutas correctas a los directorios, según donde los hayas puesto en tu sitio web. Además, debes saber que el lugar correcto para enlazar con archivos js o css es el HEAD de la página.

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>

Nota: Fíjate que le he puesto el atributo id="imagenesproducto" a la capa div principal. Ese identificador puedes llamarle como lo desees, pero luego vamos a tener que utilizarlo desde Javascript, así que acuérdate de lo que hayas puesto.

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();

Nota: Como se puede ver, ahora estoy utilizando el selector "a.lightbox" que selecciona todos los enlaces que tienen la clase lightbox, para convertirlos a cajas lightBox al invocar al plugin sobre ellos.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Alfredo Luz Silva

29/6/2011
Lightbox
Hola!
desde hace tiempo estoy esperando que publiquen un artículo sobre este tema. Vista vuestra explicación, y lo sencillo que parece instalar este plugin jQuery, creo que podré dar un improvement serio a mis páginas.
Ya os contaré.

alexjvp

30/6/2011
Duda.
Es posible hacer aparecer texto en vez de imágenes?, es decir si en vez de imágenes aparezca texto cuando se da clic, lo he intentado pero no me da, es exclusivo solo para imágenes?
Gracias.

Luis Miguel

30/6/2011
hola grasias, nesesitaba esto para un trabajo
una duda como podria usar este ejemplo en un carrusel de imagenes. por fa te agradesco de antemano

midesweb

01/7/2011
las dudas sobre lightBox
Sobre si este plugin sirve para texto... no. Solo sirve con imágenes. Tendrías que buscar otro plugin, como por ejemplo la caja "dialog" de las jQuery UI:
http://www.desarrolloweb.com/articulos/componente-dialog-jquery-ui.html

Sobre si este plugin sirve para un carrusel ¿A qué te refieres exactamente? supongo que a que las imágenes se intercambien automáticamente. Que yo sepa, este plugin no lo hace.

Es un buen plugin, pero sirve simplemente para imágenes y la funcionalidad que se ha relatado en el artículo, no le podemos pedir mucho más :(

Karina

12/7/2011
interesante plugin
Hola,

Gracias por el manual! He intentado añadir a mi página, pero cuando pincho sobre el imagen, esa se abre en el navegador, no como una capa. Lo puse todo como se explica aqui, pero no entiendo que puede ser mal...

Gracias!

midesweb

02/8/2011
si no te abre la capa
Hola, Si como dices te abre la imagen en una nueva ventana del navegador es que el plugin no está activándose, ya sea por un error Javascript o porque no estés llamando al plugin con el selector correcto. Así sin más es imposible decirte qué pueda estar pasando exactamente.

Rebe_Lunitari

19/12/2011
Problema con Lightbox
Buenas! Este plugin es una autentica maravilla, pero usandolo me ha surgido un problema. Al pasar el raton sobre las imagenes en miniatura, tanto en Chrome como en Safari, la miniatura se vacia. En Firefox se ve bien. ¿Sabeis por qué?

Gracias!

matts656

07/1/2012
Configuracion rutas
Propongo una nueva forma de configurar las rutas...

Nota: No la he probado pero mirando el codigo de jquery-lightbox-0.5.js creo que da para que funcione.

La funcion light box recibe un objeto de configuracion "settings" y hace un Extend del objeto setings que nosotros le pasamos con las configuraciones predefinidas.

Entonces basta con hacer esto para cambiar las rutas:

$('# imagenesproducto a').lightBox({imageLoading: 'otraRuta/lightbox-ico-loading.gif',
imageBtnClose: 'images/lightbox-btn-close.gif'} );

jr_acevedo

15/6/2012
LightBox
Ejemplo muy bien explicado, me funciono de maravilla. Se agradece.

Saludosss!!!!!!!

Karlos

26/11/2013
ES POSIBLE SHADOWBOX SOBRE SLIDER JQUERY
Hola, tengo un slide de imagenes en carrusel con disoluciones en fade hechoen jquery y mi duda es saber si sobre las imagenes se peude abrir una galería en shadowbox. GRACIAS y EXCELENTE ARTÍCULO

Fernanda

13/3/2015
Utilizado
Buen Dia

Muchas Gracias, lo utilize y me funciono de forma correcta.

beto

16/3/2015
descargar archivo
disculpa ¿Donde puedo descargar el archivo?, es que el link esta roto

Cristian Cuervo

17/4/2015
Duda para album
Bueno dias..
Hay forma de agrupar las imagenes ? tipo abum ? me explico... que solo aparezca una imagen que represente un album y al darle click sobre esa imagen me muestre las imagenes dee ese album.. como un catalogo ???

Gracias