Elegante Image lightbox Gallery en Vanilla JavaScript-kbox. js

Vista prévia

Descripción

Kbox es un plugin lightbox de imagen de JavaScript ligero que se utiliza para abrir y mostrar imágenes más grandes en un Gallery modal .

Características

• Varios idiomas: de, en, es, fr, it, nl, PL, RU.
• Permite a los usuarios cambiar entre imágenes en el modal.
• Interacciones de teclado.
• Animaciones Performant basadas en < a href = "http:/velocityjs.org/" target = "_ blank" rel = "noopener" > Velocity. js .
• Leyendas y contadores de imagen.

Funcionamiento

Instale & descargar.

# Yarn
$ yarn add kbox

# NPM
$ npm install kbox --save

Importa los archivos del plugin kbox. js en el documento HTML.

<link href="./css/kbox.min.css" rel="stylesheet">
<script src="./js/kbox.pack.min.js"></script>

Inserte una imagen en miniatura en el documento.

<img src="thumb-1.jpg" alt="Image Caption 1">

Envuelva la imagen en un vínculo y especifique la ruta de acceso a la imagen grande en el atributo href .

<a class="kbox" data-kbox="demo" href="full-1.jpg">

<img src="thumb-1.jpg" alt="Image Caption 1">
</a>

Para mostrar varias imágenes en el mismo modal, asegúrese de agrupar las imágenes mediante el atributo Data-kbox :

<a class="kbox" data-kbox="demo" href="full-1.jpg">

<img src="thumb-1.jpg" alt="Image Caption 1">
</a>

<a class="kbox" data-kbox="demo" href="full-2.jpg">

<img src="thumb-2.jpg" alt="Image Caption 2">
</a>

<a class="kbox" data-kbox="demo" href="full-3.jpg">

<img src="thumb-3.jpg" alt="Image Caption 3">
</a>

...

Inicialice el plugin kbox. js y listo.

window.kbox();

Personalice la Galería modal con las siguientes opciones.

window.kbox({

lang: 'fr',

animationSpeed: 500,

keyboard: true,

titles: true
});

Funciones de devolución de llamada disponibles.

window.kbox({

afterOpening : function(e) {},

afterTransition: function(e) {},

afterClosing: function(e) {},
});