Easy Touch-enabled Image Lightbox & Gallery With JavaScript – halkaBox.js

halkaBox.js is a responsive, customizable, touch-enabled and CSS3 animated JavaScript lightbox library that supports both single image and image galleries.

More features:

• Dark and light themes.
• Image preloading.
• Image loader.
• Slide or fade animations.
• Easy to implement.

How to use it:

Install and import the ‘halkabox’ into the project.

# NPM
$ npm install halkabox --save

Or include the halkaBox.min.css and halkaBox.min.js on the web page.

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

Create a single image lightbox.

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

halkaBox.run("hb-single");

Create a gallery lightbox for a group of images.

<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");

Config the lightbox with the following options.

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
       
});

Available methods:

// 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();

Changelog:

v1.6.0 (06/25/2019)

• Added double tap to zoom in/out on touch devices