Fullscreen Image Lightbox Slider – lightbox.js

lightbox.js is a pure JavaScript library that lets you show large images in a fullscreen, navigatable gallery lightbox just like an image slider.

The user can navigate through your images by left / right arrow keys or clicking on the next / prev arrows.

Basic usage:

Add a group of thumbnail images into the webpage. You can specify the large version of the thumbnail using data-big attribute on its parent container. Note that the image containers must have the same classname ‘lightbox’.

<div data-big="1.jpg" class="lightbox">
  <img src="thumb-1.jpg" alt="small"> 
</div>
<div data-big="2.jpg" class="lightbox">
  <img src="thumb-2.jpg" alt="small"> 
</div>
<div data-big="3.jpg" class="lightbox">
  <img src="thumb-3.jpg" alt="small"> 
</div>

Add the required lghtbox.css and ghtbox.css files into the webpage.

<link href="lightbox.css" rel="stylesheet">
<script src="lightbox.js"></script>

Initialize the lightbox and we’re done.

document.addEventListener("DOMContentLoaded", function() {
  var init = new lightBox();
});