Lightbox es una un plugin de jquery creado por leandrovieira para crear una galería de imágenes animadas.
El efecto es muy bueno y además te permite mostrar una miniatura de la imagen y al dar clic sobre ella te la mostrara completa.
Este plugin te será de gran utilidad si tu web o blog trata de muchas imágenes o alguna sección de el contiene muchas, aunque también puedes utilizarlo para muchas otras cosas.
Ver plugin en acción: http://www.centromex.com.ar/2012/09/galeria-imagenes-dinamicas-con-lightbox-jquery.html
Primero vamos a ir a la pagina oficial y Descargar el archivo en ZIP.. lo descomprimimos y listo nos dejará una carpeta llamada jquery-lightbox-0.5 y la subes a tu host o bien puedes utilizar los archivos que yo ya e subido .
Primero enlazar los archivos javascript recuerda colocarlos antes de la etiqueta </head>.
Nota: Si ya tienes incluido jquery no es necesario volverlo a colocar.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="URL DE TU ARCHIVO"> </script>
O desde mi host:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://prueba-lightbox.googlecode.com/files/jquery.lightbox-2-0.5.min.js"> </script>
Ahora enlazar los estilos CSS, esto es muy importante ya que sin esto ocurriría un erro con el plugin.
Igual que anteriormente puedes usar mi host.
<link rel="stylesheet" type="text/css" href="URL DE TU ARCHIVO" media="screen" />
O bien:
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/84214094/Lightbox/CSS/jquery.lightbox-0.5.css" media="screen" />
Ahora pegamos antes de </head> los estilos de la caja de imágenes.
<style type="text/css">
#gallery {
background-color: #444; /*Color de fondo*/
padding: 10px;
width: 520px; /*Ancho de la caja contenedora*/
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e; /*Color de borde en las imagenes*/
border-width: 5px 5px 20px;}
#gallery ul a:hover img {
border: 5px solid #fff; /*Color de borde al colocar el puntero*/
border-width: 5px 5px 20px;
color: #fff;} /*Color de letra*/
#gallery ul a:hover { color: #fff; } /*Color de los enlaces al poner el puntero*/
</style>
Por ultimo falta llamar a la función jquery para poner el plugin en marcha.
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
Nuestra galería estaría lista para usarse. Recuerda si deseas cambiar los estilos solo guíate en los comentarios que deje al lado de los estilos.
El efecto es muy bueno y además te permite mostrar una miniatura de la imagen y al dar clic sobre ella te la mostrara completa.
Este plugin te será de gran utilidad si tu web o blog trata de muchas imágenes o alguna sección de el contiene muchas, aunque también puedes utilizarlo para muchas otras cosas.
Ver plugin en acción: http://www.centromex.com.ar/2012/09/galeria-imagenes-dinamicas-con-lightbox-jquery.html
Primero vamos a ir a la pagina oficial y Descargar el archivo en ZIP.. lo descomprimimos y listo nos dejará una carpeta llamada jquery-lightbox-0.5 y la subes a tu host o bien puedes utilizar los archivos que yo ya e subido .
Primero enlazar los archivos javascript recuerda colocarlos antes de la etiqueta </head>.
Nota: Si ya tienes incluido jquery no es necesario volverlo a colocar.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="URL DE TU ARCHIVO"> </script>
O desde mi host:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://prueba-lightbox.googlecode.com/files/jquery.lightbox-2-0.5.min.js"> </script>
Ahora enlazar los estilos CSS, esto es muy importante ya que sin esto ocurriría un erro con el plugin.
Igual que anteriormente puedes usar mi host.
<link rel="stylesheet" type="text/css" href="URL DE TU ARCHIVO" media="screen" />
O bien:
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/84214094/Lightbox/CSS/jquery.lightbox-0.5.css" media="screen" />
Ahora pegamos antes de </head> los estilos de la caja de imágenes.
<style type="text/css">
#gallery {
background-color: #444; /*Color de fondo*/
padding: 10px;
width: 520px; /*Ancho de la caja contenedora*/
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e; /*Color de borde en las imagenes*/
border-width: 5px 5px 20px;}
#gallery ul a:hover img {
border: 5px solid #fff; /*Color de borde al colocar el puntero*/
border-width: 5px 5px 20px;
color: #fff;} /*Color de letra*/
#gallery ul a:hover { color: #fff; } /*Color de los enlaces al poner el puntero*/
</style>
Por ultimo falta llamar a la función jquery para poner el plugin en marcha.
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
Nuestra galería estaría lista para usarse. Recuerda si deseas cambiar los estilos solo guíate en los comentarios que deje al lado de los estilos.