Insertar el Lightbox en la galería

El lightbox es una simple aplicación que permite visualizar las imagenes de una galería sobre la página html, el creador es Lokesh Dhakar los archivos se pueden descargar de su página:

http://lokeshdhakar.com/projects/lightbox2/

o descargarlo aquí: lightbox2.51

Los pasos son los siguientes:

  1. Los archivos descargados copiarlos dentro de la carpeta general.
  2. Abrir el archivo html de la galería y colocar el siguiente código dentro de la etiqueta <head>. Mantener el código en el mismo orden.
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
  3. Incluir la hoja de estilo del lightbox insertando el siguiente código debajo de los dos anteriores.
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  4. Seleccionar las imágenes de la galería y colocarles en la zona del vínculo la imagen que debe abrir.
  5. Dentro de la etiqueta <a> debe colocar el siguiente codigo: rel="lightbox"
    <a href="imagenes/silla.jpg" rel="lightbox">
  6. Si desea que la imagen tenga una pequeña descripción debe aumentar: title="Descripción del producto"
    <a href="imagenes/silla.jpg" rel="lightbox" title="silla roja, precio 4000 soles">

 Datos Adicionales

  1. Si se desea agrupar las imágenes se debe coloca entre corchetes una palabra despues de lightbox. Esto se debe realizar en todas las imágenes que desea agrupar.
    <a href="imagenes/silla.jpg" rel="lightbox[agrupar]" title="silla roja, precio 4000 soles">
  2. Como el archivo esta en Ingles las imagenes se visualizan con la frase «Image 2 of 4» para modificarlo entrar al archivo lightbox.js y en la línea 55 y 56 modifica las palabras.

 Apariencia del Lightbox

  1. Debe modifica la hoja de estilo del lightbox y cambiar el color según lo que necesite