Elegant Image Lightbox Gallery In Vanilla JavaScript – kbox.js

kbox is a lightweight JavaScript image lightbox plugin used to open and display larger images in a responsive gallery modal.

Features:

• Multiple languages: de, en, es, fr, it, nl, pl, ru.
• Allows the users to switch between images in the modal.
• Keyboard interactions.
• Performant animations based on velocity.js.
• Image captions and counters.

How to use it:

Install & download.

# Yarn
$ yarn add kbox
# NPM
$ npm install kbox --save

Import the kbox.js plugin’s files into the html document.

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

Insert a thumbnail image into the document.

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

Wrap the image into a link and specify the path to the large image in the href attribute.

<a class="kbox" data-kbox="demo" href="full-1.jpg">
  <img src="thumb-1.jpg" alt="Image Caption 1">
</a>

To display multiple images in the same modal, make sure to group your images using the data-kbox attribute:

<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>
...

Initialize the kbox.js plugin and done.

window.kbox();

Customize the gallery modal with the following options.

window.kbox({
  lang: 'fr',
  animationSpeed: 500,
  keyboard: true,
  titles: true
});

Callback functions available.

window.kbox({
  afterOpening : function(e) {},
  afterTransition: function(e) {},
  afterClosing: function(e) {},
});