1.¿En que esta hecha?
Basada en Javascript y en Css, esta galeria de imagenes, puede ser usada de base para que la implementes en tu proyecto web.
2.¿Como hago para hacerla funcionar en proyecto?
Bien esta galeria posee 3 pasos basicamente:
Paso 1 Descarga
Descarga el archivo de Lightbox2.04
Paso 2 : Preparacion de tu archivo html:
En el archivo .html donde quieras usar la galeria lo que tienes que hacer es insertar las siguientes lineas, que son el codigo de los archivos javascript, incluyenlo dentro de la etiqueta head
<head>
<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>
</head>
Luego inserta el archivo css tambien dentro de la etiqueta head de la siguiente manera
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"/>
Paso 3: Activar la galeria
Luego lo unico que te falta es colocar la imagen que quieres que aparezca en tu pagina, para que cuando el usuario haga click sobre ella, se habra la galeria.
Con este codigo insertas la imagen que vera el usuario al abrir la pagina y la foto que se expandera cuando el usuario alla realizado un click sobre ella:
<a href="rutadelaimagenquesequiereampliar" title="Mi primera foto" rel="lightbox"><img src="rutadelaimagenqueseveenelarchivohtml" alt="" /></a>
En dado caso que quieres que cuando el usuario alla dado click se muestren un grupo de fotos en la galeria, lo unico que debes modificar es uno de los atributos de la etiqueta a que es rel. Usando [] colocas dentro de ellas un nombre que identifique al nombre del grupo de fotos, y luego insertas las fotos que seran vistas:
<a href="images/image-1.jpg" rel="lightbox[grupo1]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[grupo1]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[grupo1]">image #3</a>
Ademas tambien puedes colocarle un titulo descriptivo a cada foto a traves del atributo title, colocando entre "" la descripcion que quieras:
<a href="rutadelaimagenquesequiereampliar" title="Mi primera foto" rel="lightbox"><img src="rutadelaimagenqueseveenelarchivohtml" alt="" /></a>
Disfrutalo
-