Grid Gallery Lightbox Plugin

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

Download

---

For more Advanced Usages, please check the demo page or visit the official website.