Hoy os voy a enseñar como podeis hacer vuestra propia galería de fotos a partir de una librería javascript llamada lightbox. Podeis descargar esta librería de la siguiente dirección LIGHTBOX.
En su página podeis ver diversos ejemplos de cómo queda el resultado de aplicar esta librería Javascript sobre nuestras imágenes. También podeis visitar nuestra sección de fotos donde podeis ver algunos ejemplos reales de funcionamiento ya que esa web lo tiene implementado.
Su funcionamiento es muy sencillo y fácil de incorporar a vuestras páginas. Tras haber descargado la librería, la copiais a vuestro directorio de trabajo.
Lo siguiente que debemos hacer es añadir la librería en la página que queremos usarla. Para ello escribimos la siguiente linea dentro del HEAD de nuestra página:
<head> ... <link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" /> ... </head>
Tened en cuenta el directorio donde teneis la librería, en nuestro caso, esta alojada en una carpeta llamada "lightbox".
Tras esto ya estamos listos para usarla. Para ello debemos usar el sigueinte codigo para cada una de nuestra imagenes:
<a href="images/imagen1.jpg" rel="lightbox" title="imagen1"> imagen1</a>
Esto nos crearía un enlace que al pincharlo nos mostraría la foto en su tamaño original.
Si quisiesemos mostrar varias imágenes en una misma página y queremos que al darle al botón de next nos podamos mover a través del grupo sólo debemos poner el siguiente código ligeramente modificado respecto del anterior.
<a href="images/imagen1.jpg" rel="lightbox[cadena1]" title="imagen1">imagen1</a> <a href="images/imagen2.jpg" rel="lightbox[cadena1]" title="imagen2">imagen2</a> <a href="images/imagen3.jpg" rel="lightbox[cadena1]" title="imagen3">imagen3</a>
"cadena1" indica el grupo al que pertenece cada foto. Y así, con este simple código tendriais una galería de fotos muy vistosa y bonita. Debeis tener en cuenta que las imágenes se reproducen con su tamaño original.
Espero que os sirva.
Cualquier problema no dudeis en preguntarme.