Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox

Category: Gallery , Javascript , Modal & Popup | October 17, 2017
Views Total:4,712 views
Official Page:Go to website
Last Update:October 17, 2017


Easy Gallery Lightbox In Pure JavaScript – pureJSLightbox


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>

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:

2 thoughts 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.


Leave a Reply