Simple and Light Grid Gallery With Lightbox Support – grid-gallery
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.
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.