Grid Gallery Lightbox is a javascript library that allows the user to switch between images in a popup by clicking on any thumbnail. You can click on any of these images will display a gallery lightbox where the visitors are able to navigate between images by clicking navigation arrows. You can customize the display type: Dark Mode, Horizontal Layout, Square Layout, Customized Gap and Row Height and Column Width
Features:
- Thumbnails support
- Fully Responsive
- Mobile Friendly
- FullScreen support
- Browser features control (scrollbar, mousewheel, right click prevention)
- Keyboard and mouse wheel support (navigate and zoom)
Live Demo




















How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" href="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/css/grid-gallery.min.css" />
2. HTML
Create a container where you want to render gallery
<div id="gg-screen"></div>
<div class="gg-box">
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1200.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1201.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1300.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1600.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1601.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1602.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1603.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1604.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1605.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1606.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1607.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1608.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1609.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1610.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1611.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1612.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1613.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1614.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1615.jpg">
</div>
<div class="gg-element">
<img src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/images/1616.jpg">
</div>
</div>
3. Javascript
Load jQuery library together with the Grid Gallery Lightbox library into your code
<script type="text/javascript" src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/grid-gallery-lightbox/js/grid-gallery.js"></script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.