jQuery Lightbox versión mejorada
Lightbox es un plugin simple, elegante y discreto, que no necesita código extra y se utiliza para superponer imágenes en la página actual a través de la potencia y flexibilidad de selección de jQuery.
Este script es mucho más fácil de editar comparado con otros artículos que se han publicado en este blog relacionados con el efecto de ampliar imágenes con lightbox.
Para implementarlo deberemos descargar e insertar en nuestro <head> los scripts básicos de jQuery y el plugin lightbox + su código CSS.
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.zoom').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.8,
containerResizeSpeed: 350,
txtImage: 'Imagen',
txtOf: 'de'
});
});
</script>
Y en nuestro <body> podriamos tener un listado de imágenes mostradas al usuario a 120x120px y que al pulsar en una haríamos zoom a su tamaño original, en este caso 500x500px.
Cuando estamos visionando una imagen en grande, si hacemos click en la imagen iremos a la siguiente como una galería de imágenes.
<a href="images/serp.jpg"><img src="images/serp.jpg" width="120px" height="120px" /></a> <a href="images/efect.jpg"><img src="images/efect.jpg" width="120px" height="120px" /></a> <a href="images/woman.jpg"><img src="images/woman.jpg" width="120px" height="120px" /></a> <a href="images/astro.jpg"><img src="images/astro.jpg" width="120px" height="120px" /></a>
Autor
¿Buscas trabajo de programador?
4 respuestas a “jQuery Lightbox versión mejorada”
Deja una respuesta
68 artículos que te podrían interesar
hola, buen dia quisiera ver el plugins por favor
Hola,
Lo puedes descargar de http://lokeshdhakar.com/projects/lightbox2/
Saludos
Hola gracias por la publicación solo me gustaria saber donde la descargo gracias
tienes que ir codigo fuente de la pagina de ejemplo, de los link css y js, descarga los codigos luego descarga el html y anda pegandolo en archivos individuales en sus respectivas carpetas y listo