Fullscreen Image Lightbox Slider – lightbox.js

Category: Gallery , Javascript | December 4, 2015
Views Total:2,418 views
Official Page:Go to website
Last Update:December 4, 2015


Fullscreen Image Lightbox Slider – lightbox.js


lightbox.js is a pure JavaScript library that lets you show large images in a fullscreen, navigatable gallery lightbox just like an image slider.

The user can navigate through your images by left / right arrow keys or clicking on the next / prev arrows.

Basic usage:

Add a group of thumbnail images into the webpage. You can specify the large version of the thumbnail using data-big attribute on its parent container. Note that the image containers must have the same classname ‘lightbox’.

<div data-big="1.jpg" class="lightbox">
  <img src="thumb-1.jpg" alt="small"> 
<div data-big="2.jpg" class="lightbox">
  <img src="thumb-2.jpg" alt="small"> 
<div data-big="3.jpg" class="lightbox">
  <img src="thumb-3.jpg" alt="small"> 

Add the required lghtbox.css and ghtbox.css files into the webpage.

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

Initialize the lightbox and we’re done.

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

You Might Be Interested In:

Leave a Reply