Lightbox de imagen adaptable minimalista en JavaScript puro

Vista prévia

Descripción

IMG-LightBox es una librería de lightbox de JavaScript ligera y fácil de usar para mostrar la versión grande de tu imagen en una ventana emergente modal responsive con animaciones de fadeIn y fadeOut basadas en CSS3.

Compatible con aplicaciones de una sola página (SPA) y Progressive Web App (PWA).

Instalación

# NPM
$ npm install img-lightbox --save

Funcionamiento

Añada referencias a JavaScript y CSS de IMG-lightbox.

<link rel="stylesheet" href="./img-lightbox.css">
<script src="./img-lightbox.js"></script>

Agregue un vínculo con la clase CSS de ' IMG-lightbox-Link ' a la imagen dentro del documento. El atributo ' src ' se utiliza para especificar la ruta a la versión grande de la imagen.

<a href="large.jpg"


class="img-lightbox-link"


src="large.jpg"


aria-label="hidden"


rel="lightbox">

 <img src="thumb.jpg" alt="Image Lightbox">
</a>

Inicializar el lightbox de la imagen.

imgLightbox(document.body || "");

Event handlers available.

var manageImgLightboxLinks = function (root, scope) {


var ctx = scope && scope.nodeName ? scope : "";


if (root.imgLightbox) {


 imgLightbox(ctx, {



 onCreated: function () {




 // on created



 },



 onLoaded: function () {




 // on loaded



 },



 onError: function () {




 // on error



 },



 onClosed: function () {




 // on closed



 }


 });


}
};
manageImgLightboxLinks("undefined" !== typeof window ? window : this, document.body || "");

Registro de cambios

v0.2.3 (01/17/2018)

• Se corrigió init para SPA
• Se ha corregido la creación de varios contenedores

v0.2.1 (12/23/2018)

• Desactivación del desplazamiento del cuerpo fijo en la lightbox abierta

v0.1.9 (12/21/2018)

• Se corrigió la minificación de CSS

v0.1.8 (12/20/2018)

• Agregado soporte de eventos táctiles

v0.1.5 (12/19/2018)

• Corregido en el error del evento tecla ESC

v0.1.4 (12/18/2018)

• Se ha reorginizado el árbol de archivos de la biblioteca

v0.1.3 (12/18/2018)

• Se ha cambiado el z-index 999999 para jugar bien con wp-admin
• Datos modificados: src (que sigue siendo compatible con la compatibilidad) con href como origen de la imagen
• Imágenes de interfaz de usuario de CSS retina Ready puro, no externas
• Congelar el cuerpo desplazándose en la lightbox abierta
• Se agregó el botón cerrar
• Cierra el ESC

v0.1.2 (07/16/2018)

• Agregada opción de devolución de llamada onClosed

07/08/2018

• Actualización de JS