Author: | PyxelCoder |
---|---|
Views Total: | 2,397 views |
Official Page: | Go to website |
Last Update: | December 4, 2015 |
License: | MIT |
Preview:

Description:
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> <div data-big="2.jpg" class="lightbox"> <img src="thumb-2.jpg" alt="small"> </div> <div data-big="3.jpg" class="lightbox"> <img src="thumb-3.jpg" alt="small"> </div>
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(); });