Lightbox de imagen táctil fácil & galería con JavaScript-halkaBox. js

Vista prévia

Descripción

halkaBox. js es una librería de lightbox JavaScript adaptable, personalizable, táctil y con animaciones CSS3 que admite galerías de imágenes y imágenes individuales.

Más características

• Temas oscuros y ligeros.
• Precarga de imagen.
• Cargador de imágenes.
• Desliza o difumine animaciones.
• Fácil de implementar.

Funcionamiento

Instale e importe el ' halkabox ' en el proyecto.

# NPM
$ npm install halkabox --save

O incluya el halkaBox. min. CSS y halkaBox. min. js en la Página Web.

<link href="dist/halkaBox.min.css" rel="stylesheet">
<script src="dist/halkaBox.min.js"></script>

Cree un cuadro de luz de imagen único.

<a href="large.jpg" class="hb-single" title="Image Caption">

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

halkaBox.run("hb-single");

Cree un lightbox de galería para un grupo de imágenes.

<a href="1-large.jpg" class="galleryDemo" title="Caption 1">

<img src="1-small.jpg">
</a>
<a href="2-large.jpg" class="galleryDemo" title="Caption 2">

<img src="2-small.jpg">
</a>
<a href="3-large.jpg" class="galleryDemo" title="Caption 3">

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

halkaBox.run("galleryDemo");

Configuración del lightbox con las siguientes opciones.

halkaBox.options({


// hide control buttons on mobile devices

hideButtons: true,


 // "slide" or "fade"

animation: "fade",


// "dark" or "light"

theme: "dark",


 // the number of images to preload

preload: 2,


// swipe down to close

swipeDownToClose: false,


// switch between images with mousewheel

nextPrevOnWheel: true,


// is zoomable

isZoomable: true




 });

Métodos disponibles:

// open a specific image in the lightbox
instance.open(0);

// goto the next
instance.next();

// goto the previous
instance.previous();

// close
instance.close();

// destroy
instance.destroy();

Registro de cambios

10/11/2018

• v1.4.1: Added more options and methods