Script Galería Web | Galleria 1.2 - LightBox 2
Galleria 1.2

Galleria es una imagen de JavaScript marco galería construida en la parte superior de la biblioteca jQuery. El objetivo es simplificar el proceso de creación de galerías de imágenes profesional para la web y dispositivos móviles.

Galleria es de uso libre y bajo licencia MIT, lo que significa que los lugares casi ninguna restricción en lo que la forma que desee utilizarlo.

web

DEMO DESCARGA

INSTALACION

Modificar los archivos de acuerdo al archivo Readme e intalar en su servidor de hosting.

script

LightBox 2

LightBox 2 es un Script que se utiliza para mostrar imágenes ampliadas en una misma ventana. El script lo que hace es mostrar un div por encima de todo el contenido. El div se hace a medida de la foto y se atenua el resto. Luego con un click encima se cierra.

galería

DEMO DESCARGA

Primero debemos descagar la aplicación completa de huddletogether.com y descomprimir el archivo en la raiz de nuestro sitio web.

INSTALACION

Una vez que tenemos todos los archivos en su lugar debemos agregar en el head de nuestro html los JS y CSS que son necesarios para hacer funcionar Lightbox2.

<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>



Agregar CSS

 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 



Y ahora solo debemos agregar desde cada imagen miniatura un link a la imagen grande segun el siguiente codigo.


<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>



Si lo que tenemos es una serie de imágenes que forman parte de un mismo grupo se le puede agregar un código a cada una para que desde una imagen podamos tener los botones SIGUIENTE y PROXIMO.


<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>



2