Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox

Preview:

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