Si tienes un blog o un sitio (tanto profesional como personal) y quieres mostrar tus imágenes de manera más profesional y simple, pero no quieres gastar dinero en ello, Lightbox puede resultarte muy útil. Se trata de un script que permite mostrar las imágenes flotando sobre la página en una caja que se cierra con un solo clic.
¿Cómo hacer para activar este fantástico script? Muy sencillo. Primero debes descargar desde su sitio la carpeta con el script: http://www.lokeshdhakar.com/projects/lightbox2/#download
Luego, deberás subir la carpeta a tu servidor y alojarla en donde colocas los scripts de tu sitio (si no tienes ninguna, crea una). En este caso, la carpeta se denomina “pics”, por lo que utilizaremos esta denominación en el código (no olvides cambiarlo por el nombre de tu carpeta).
Para que Lightbox funcione necesitamos dos librerías: prototype y scriptaculous. Es necesario agregar las direcciones de éstas con el código que describiremos a continuación, colocándolo en el header:
<script type=”text/javascript” src=”pics/prototype.js”></script>
<script type=”text/javascript” src=”pics/scriptaculous.js?load=effects,builder></script>
<script type=”text/javascript” src=”pics/lightbox.js”></script>
Para que los estilos se vean bien, debemos incluir en la hoja de estilos de nuestro sitio, el código que contiene la hoja denominada “screen”.
Y para finalizar y poder finalmente activar este efecto, debemos utilizar este código:
<a href=”imágenes/imagen.jpg” rel=”lightbox” title=”lo que quieras”>Nombre de la fotografía</a>
Enlace | Lightbox2