Pure JavaScript Gallery Lightbox Library – LightBox

Preview:

Description:

A simple pure JavaScript lightbox library that displays zoomed images in a fullscreen, responsive gallery popup with next / prev navigation.

Basic usage:

Load the stylesheet file in the head section of the web page.

<link href="lightbox.css" rel="stylesheet">

Load the script lightbox.js at the end of the web page.

<script src="lightbox.js"></script>

Insert a group of small images (thumbnails) into the webpage. Each of them should be wrapped into a DIV element with the data-big attribute pointing to the source of the large image. The class attribute of the DIV elements must have the same value if you want these images to be displayed in a same gallery popup.

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

Initialization.

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