Galería de imágenes con VisualLightBox
Visual Light Box es una galería muy atractiva para añadir a tus páginas Webs.
Añadir esta galería a tu página Web es muy sencillo. Tan solo tienes que incorporar la librería jQuery y los estilos necesarios en la cabecera de tu páginas:
<link rel="stylesheet" href="visuallightbox.css" type="text/css" /> <link rel="stylesheet" href="vlightbox.css" type="text/css" /> <script type="text/javascript" src="../jquery.js"></script>
La galería la podrás añadir en el <body> de tu página de la siguiente forma:
<div id="vlightbox">
<a id="firstImage" title="image 1" href="images/pic1.jpg"><img alt="dfa" src="images/pic1.jpg" /></a>
<a title="image 2" href="images/pic2.jpg"><img alt="image 2" src="images/pic2.jpg" /></a>
<a title="image 3" href="images/pic3.jpg"><img alt="image 3" src="images/pic3.jpg" /></a>
<a title="image 4" href="images/pic4.jpg"><img alt="image 4" src="images/pic4.jpg" /></a>
<a title="image 5" href="images/pic5.jpg"><img alt="image 5" src="images/pic5.jpg" /></a>
</div>
<script type="text/javascript">
var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
</script>
<script type="text/javascript" src="visuallightbox.js"></script>
Como puedes observar el código es bastante sencillo. Con una imagen dentro de un link y los scripts de la galería ya podemos obtener el efecto visual light box.
También tienes la posibilidad de añadir un título y los estilos de la galería se manejan a través de la hoja de estilos CSS.
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
3 respuestas a “Galería de imágenes con VisualLightBox”
Deja una respuesta
60 artículos que te podrían interesar
Hola Jose, si necesito agregar mas de una galería en la misma pagina y que respete la división de cada uno de ellas, no eh dado en el clavo, se tiene que hacer alguna modificación en el archivo visualllightbox.js.
Saludos.
ola..me gustaria saber como insertar imagenes dinamicas en la plantilla principal de la pag web con php..seria de gran ayuda
Si lo que necesitas es recorrer un directorio de imágenes te podría servir lo siguiente:
http://www.jose-aguilar.com/blog/recorrer-directorio-de-archivos-con-php/
Espero te sirva,
Saludos