Biblioteca de lightbox de la galería de JavaScript puro-LightBox
| Autor: | NonoQ |
|---|---|
| Views Total: | 2,509 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 22, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una sencilla biblioteca de lightbox de JavaScript puro que muestra imágenes ampliadas en una ventana emergente de galería interactiva con la siguiente/anterior navegación.
¿Cómo funciona?
Cargue el archivo de la hoja de estilo en la sección Head de la Página Web.
<link href="lightbox.css" rel="stylesheet">
Cargue el script lightbox. js al final de la Página Web.
<script src="lightbox.js"></script>
Inserte un grupo de imágenes pequeñas (miniaturas) en la Página Web. Cada uno de ellos debe estar envuelto en un elemento DIV con el atributo Data-Big que apunta al origen de la imagen grande. El atributo de clase de los elementos DIV debe tener el mismo valor si desea que estas imágenes se muestren en una misma ventana emergente de galería.
<div data-big="large-1.jpg" class="lightbox"> <img src="small-1.jpg" alt="small"> </div> <div data-big="large-2.jpg" class="lightbox"> <img src="small-2.jpg" alt="small"> </div> <div data-big="large-3.jpg" class="lightbox"> <img src="small-3.jpg" alt="small"> </div>
Inicialización.
document.addEventListener("DOMContentLoaded", function() {
var init = new lightBox();
});
