Pure JavaScript Gallery Lightbox Library – LightBox

Category: Gallery , Javascript , Modal & Popup , Recommended | June 22, 2015
Views Total:2,464 views
Official Page:Go to website
Last Update:June 22, 2015


Pure JavaScript Gallery Lightbox Library – LightBox


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 data-big="large-2.jpg" class="lightbox">
    <img src="small-2.jpg" alt="small">
<div data-big="large-3.jpg" class="lightbox">
    <img src="small-3.jpg" alt="small">


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

You Might Be Interested In:

Leave a Reply