Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox

Category: Gallery , Javascript , Modal & Popup | October 17, 2017
Author: dianadi09
Views Total: 2,817
Official Page: Go to website
Last Update: October 17, 2017
License: MIT

Preview:

Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox

Description:

pureJSLightbox is a zero-dependency JavaScript library for creating a simple gallery where images open in a responsive, touch-enabled lightbox with the ability to scroll through all images with navigation arrows and swipe event.

How to use it:

Link to the pureJSLightbox’s JavaScript and Stylesheet:

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

Add class “pure-js-lightbox-container” to your gallery container.

<!--  Add class "pure-js-lightbox-container" to your gallery container-->
<ul id="gallery" class="pure-js-lightbox-container">
  <li><a href="1.jpg"><img src="1.jpg"/></a></li>
  <li><a href="2.jpg"><img src="2.jpg"/></a></li>
  <li><a href="3.jpg"><img src="3.jpg"/></a></li>
  <li><a href="4.jpg"><img src="4.jpg"/></a></li>
  <li><a href="5.jpg"><img src="5.jpg"/></a></li>
  <li><a href="6.jpg"><img src="6.jpg"/></a></li>
</ul>

Initialize the gallery lightbox and you’re done.

var test = new pureJSLightBox();

Configuration options with default values.

var test = new pureJSLightBox({

    // shows fullscreen overlay
    overlay: true,

    // shows navigation arrows
    navigation: false,

    // enable swipe
    swipe: false
    
});

You Might Be Interested In:


One thought on “Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox

  1. sammy

    It is good but i couldnt use it for different objects of the same page. i have couple images on my page and every one of them has 3 -4 pictures. I want to open the images when i click on the preview image. but it doesnt work. Can u please help me about it.

    Reply

Leave a Reply