Pure JavaScript Gallery Lightbox Library – LightBox

Category: Gallery , Javascript , Modal & Popup , Recommended | June 22, 2015
Author: NonoQ
Views Total: 2,695
Official Page: Go to website
Last Update: June 22, 2015
License: MIT

Preview:

Pure JavaScript Gallery Lightbox Library – LightBox

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();
});

You Might Be Interested In:


Leave a Reply