Simple and Light Grid Gallery With Lightbox Support – grid-gallery

by Posted on

Today I am going to share a small grid gallery jQuery plugin to generate a responsive, justified grid layout for showcasing your photos as portfolio. While Click on any of these images will display a gallery lightbox where the visitors can see the larger part of image and able to navigate between images by clicking navigation arrows.
jquery-image-gallery

Libraries

Add a link to the css and js minified library in your <head>:

<link rel="stylesheet" type="text/css" href="css/grid-gallery.min.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="js/grid-gallery.min.js"></script>



HTML

Create an empty element for the gallery lightbox.

<div id="gg-screen"></div>

Insert your own images to the grid gallery as follows

<div class="gg-box">
  <div class="gg-element">
    <img src="img/your-image-1.jpg">
  </div>
  <div class="gg-element">
    <img src="img/your-image-2.jpg">
  </div>
  <div class="gg-element">
    <img src="img/your-image-3.jpg">
  </div>
  <div class="gg-element">
    <img src="img/your-image-n.jpg">
  </div>
</div>




See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by jestov. Visit their official github repository for more information and follow for future updates.


Published by admin