Lightweight Photo Grid Gallery With Lightbox – grid-gallery

Category: Gallery , Javascript | November 24, 2019
Author: jestov
Views Total: 803
Official Page: Go to website
Last Update: November 24, 2019
License: MIT

Preview:

Lightweight Photo Grid Gallery With Lightbox – grid-gallery

Description:

A lightweight, responsive photo grid gallery with lightbox integrated that allows the user to switch between images in a popup by clicking on any thumbnail.

How to use it:

Link to the stylesheet grid-gallery.min.css and JavaScript grid-gallery.min.js.

<link rel="stylesheet" href="css/grid-gallery.min.css">
<script src="js/grid-gallery.min.js"></script>

Add images to the grid gallery.

<div class="gg-box">
  <img src="img/1.jpg">
  <img src="img/2.jpg">
  <img src="img/3.jpg">
  <img src="img/4.jpg">
  <img src="img/5.jpg">
  ...
</div>

Create a fullscreen overlay for the image lightbox. That’s it.

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

Changelog:

11/24/2019

  • update class name

10/27/2019

  • improve UI

04/21/2019

  • improve css

You Might Be Interested In:


Leave a Reply