Efecto Lightbox para mostrar ampliaciones

(NOTA: Ha habido una actualización en la web del diseñador y los archivos que se enlazan aquí no son los más recientes. Te recomiendo qued una vez leído el artículo, vayas directamente a las web de Lokesh Dhakar para descargarlos)

Seguramente hayáis tenido que hacer alguna vez el efecto de ampliar una imagen en una nueva capa al hacer clic. Hay muchas formas de resolver esto, con flash, con capas ocultas, con CSS… Pero hay un efecto muy chulo que es posible que hayáis visto en alguna web, y que podemos añadir a nuestras páginas de un modo muy sencillo, con resultados bastante aparentes. Se trata del efecto Lightbox.

El efecto Lightbox, diseñado por Lokesh Dhakar, amplia las imágenes de un modo animado, ya que el cuadro se redimensiona ampliándose o reduciéndose según las dimensiones de la imagen y con un modo de transición suave hace un efecto muy bonito.

Web oficial del script, con miniaturas de ejemplo.

El efecto permite trabajar con imágenes de distintos tamaños sin tener que parametrizar para cada uno de ellos distinto código, ya que se adapta a cualquier tamaño. Además, en la versión 2 permite efectuar navegación por grupo en modo carrusel, sin tener que cerrar y abrir las imágenes.

Al hacer clic sobre una miniatura, un velo negro traslúcido cubre el fondo de la página, llevando el foco al primer plano. En él, la imagen ampliada aparece con un marco blanco similar al de las fotografías Polaroid donde, en su parte inferior, nos permite añadir título y descripción de la imagen.

Imagen ampliada.

Además, si queremos crear grupos, aparecen al pasar el ratón por determinadas zonas de la imagen, unos botones de «Anterior» y «Siguiente» que nos permite movernos por todo el grupo. Y por supuesto, el botón de cerrar, para volver a la página con las miniaturas.

Controladores (botones) de la imagen.

Descarga e instalación:

Para utilizarlo en nuestra web, necesitamos descargar una serie de archivos, que encontramos aquí, descomprimirlos en nuestro equipo y copiarlos en el directorio donde se encuentre nuestro sitio web, a nivel raíz.

Son tres carpetas (css, images y js) que contienen los archivos necesarios para el buen funcionamiento del script. La carpeta «css» contiene los archivos que definen el estilo y el diseño, la carpeta «images» las imágenes que utiliza, como los botones de cerrar y navegación, y la carpeta «js» los archivos javascript que usa para general el script.

Esto es lo que te encontrarás en el archiv ZIP de la descarga.

Además, hay un archivo «index.html» con las instrucciones de uso del script que os estoy contando aquí. Este último archivo no es necesario para el funcionamiento del efecto.

Ahora tenemos que crear la página que va a alojar el efecto. Será un documento html normal, en el que estén insertadas las imágenes en miniatura que queremos ampliar. Necesitamos pues dos imágenes, una con un tamaño pequeño, que se insertará en la página, y otra con un tamaño mayor, que será la que aparezca cuando hacemos clic en la miniatura.

Guardaremos esta página en el directorio raíz de nuestro sitio con el nombre que deseemos. Una vez está todo en su sitio, es necesario incluir un fragmento de código en nuestra página, la que contiene las miniaturas que queremos ampliar.

En el encabezado (head) de nuestro documento html añadiremos estas cuatro líneas de código. Las tres primeras llaman a los archivos .js que se encuentran en una de las carpetas que hemos copiado, y la cuarta hace lo mismo con los archivos .css.

<script type=»text/javascript» src=»js/prototype.js»></script>
<script type=»text/javascript» src=»js/scriptaculous.js?load=effects,builder»></script>
<script type=»text/javascript» src=»js/lightbox.js»></script>
<link rel=»stylesheet» href=»css/lightbox.css» type=»text/css» media=»screen» />

Es importante que tanto las carpetas como la página en la que estemos trabajando se encuentren en el mismo nivel del directorio. De lo contrario, deberéis modificar la ruta (src) que aparece en el código.

Una vez hemos hecho eso, crearemos los vínculos entre las imágenes pequeñas y las grandes, de un modo convencional. Después, en cada uno de los vínculos que hemos creado, modificaremos el código añadiendo la instrucción rel=»lightbox» tras el href de cada vinculo.

Creando el vínculo en Dreamweaver.

VINCULO NORMAL:  <a href=»images/imagengrande.jpg» title=»Foto de grupo»><img src=»imagenpeque.jpg»></a>

VINCULO MODIFICADO:  <a href=»images/imagengrande.jpg» rel=»lightbox» title=»Foto de grupo»><img src=»imagenpeque.jpg»></a>

Y ya está hecho, podéis probarlo y ver el lo chulo que queda el efecto. Sencillo, ¿no?

Creando carruseles:

Si queremos ampliar varias imágenes, y que ellas formen parte de un grupo, posibilitando pasar de una a otra ampliación mediante siguiente/anterior sin tener que cerrar la ampliación y volver a hacer clic, debemos crear un grupo que conforme un carrusel, y asociar las fotos entre sí.

Para hacerlo, en lugar de añadir la etiqueta anterior a los enlaces, incluiremos esta otra; rel=»lightbox[nombredegrupo]».

En ella, se hace referencia entre corchetes al grupo, así el efecto sabe que tiene que recorrer todas las fotos que tengan el mismo nombre de grupo. Podemos incluso crear varios grupos en la misma página.

Personalizando el efecto:

De todos los archivos que hemos descargado, no debéis tocas ninguno si no tenéis claro lo que estáis haciendo, pues el cambio de uno de los parámetros puede hacer que el efecto funcione mal, o incluso que no funcione.

No obstante, podemos realizar algunos cambios nos intrusivos con el script, como cambiar los botones o el diseño.

Podemos crear botones personalizados con un editor gráfico, y dimensionarlos y nombrarlo del mismo modo que los originales. Así al sobrescribirlos ocuparán el lugar de los otros sin necesidad de realizar ningún cambio.

Esto nos permitirá traducir al castellano botones como «close» o «next», o añadir iconos a los mismos si lo creemos necesario.

Además, podemos modificar el archivo css para cambiar algunas cosas, como colores de fondo y demás.

Vista del código CSS.

Lo que nos os recomiendo a no ser que tengáis bastantes conocimientos, es tocar los archivos .js, que son los que contienen el meollo del asunto.

El script es crossbrowser, es decir, funciona en todos los navegadores (al menos lo actuales), y no necesita plug-ins ni nada que descargar en el equipo de quien lo está visualizando.

De todas formas, si por algún motivo no funcionase bien, las ampliaciones se seguirían mostrando, aunque en vez de con el efecto lightbox, como imagen en nueva ventana.

Eso es todo, a disfrutar del efecto, y a dotar a nuestras web de mayor dinamismo.