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

Category: Javascript , Modal & Popup , Recommended | October 11, 2018
Author: ahmednooor
Views Total: 658 views
Official Page: Go to website
Last Update: October 11, 2018
License: MIT

Preview:

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

Description:

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:

10/11/2018

  • v1.4.1: Added more options and methods

You Might Be Interested In:


Leave a Reply