Biblioteca de lightbox de imagen de JavaScript puro-luminoso

Vista prévia

Descripción

Luminous es una librería JavaScript súper pequeña y de dependencia cero para superponer tus imágenes como un lightbox.

Características

• Cargador de imágenes.
• Animación CSS3.
• Eventos de devolución de llamada.
• Muchas opciones de personalización.

¿Cómo funciona?

Incluya la hoja de estilo de Luminous y JavaScript en la página HTML.

<link rel="stylesheet" href="dist/luminous-basic.css">
<script src="dist/luminous.js"></script>

Envuelve tu imagen en un < una > etiqueta apuntando a la imagen más grande.

<a class="zoom-in" href="large.jpg">

<img src="small.jpg">
</a>

Active el lightbox de la imagen.

new Luminous(document.querySelector('a'));

Todas las opciones de configuración y funciones de devolución de llamada.

var options = {


// Prefix for generated element class names (e.g. `my-ns` will


// result in classes such as `my-ns-lightbox`. Default `lum-`


// prefixed classes will always be added as well.


namespace: null,



// Which attribute to pull the lightbox image source from.


sourceAttribute: 'href',



// Which attribute to pull the caption from, if any.


captionAttribute: null,



// The event to listen to on the _trigger_ element: triggers opening.


openTrigger: 'click',



// The event to listen to on the _lightbox_ element: triggers closing.


closeTrigger: 'click',



// Allow closing by pressing escape.


closeWithEscape: true,



// Automatically close when the page is scrolled.


closeOnScroll: false,



// A selector defining what to append the lightbox element to.


appendToSelector: 'body',



// If present (and a function), this will be called


// whenever the lightbox is opened.


onOpen: null,



// If present (and a function), this will be called


// whenever the lightbox is closed.


onClose: null,



// When true, adds the `imgix-fluid` class to the `img`


// inside the lightbox. See https://github.com/imgix/imgix.js


// for more information.


includeImgixJSClass: false,



// Add base styles to the page. See the "Theming"


// section of README.md for more information.


injectBaseStyles: true,



};

new Luminous(document.querySelector('a'), options);