Justified Grid Gallery With Lightbox Support - grid-gallery

A small grid gallery jQuery plugin to generate a responsive, justified grid layout for showcasing your photos in an elegant way.

Clicking on any of these images will display a gallery lightbox where the visitors are able to navigate between images by clicking navigation arrows.

Heavily based on CSS Grid Layout System.

How to use it:

1. Import jQuery (slim build) and the jQuery grid-gallery plugin's files into the document.

<link rel="stylesheet" href="css/grid-gallery.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="js/grid-gallery.min.js"></script>

2. Create an empty element for the gallery lightbox.

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

3. Insert your own images to the grid gallery as follows.

<div class="gg-box">
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1300/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1200/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1200/1600/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1600/1201/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1200/1601/?random">
  </div>
  <div class="gg-element">
    <img src="https://picsum.photos/1201/1600/?random">
  </div>
  ...
</div>

Changelog:

2018-12-24

• Better media queries.

2018-11-26

• CSS update

---

This awesome jQuery plugin is developed by jestov. For more Advanced Usages, please check the demo page or visit the official website.