Justified Image Grid With Lightbox - jQuery Flex Photo Gallery

A responsive, flexible, dynamic, justified photo gallery/grid plugin that mages will open in a lightbox popup with the ability to navigate between images by clicking the left/right arrows. Written in jQuery and CSS flexbox.

How to use it:

1. Add references to jQuery library and the Flex Photo Gallery's files.

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<script src="jquery.flex-photo-gallery.js"></script>
<link rel="stylesheet" href="jquery.flex-photo-gallery.css"/>

2. Create an array of images for the gallery.

var imageArray = [
    {
      "url": "1.jpg",
      "width": 1600,
      "height": 900
    },
    {
      "url": "2.jpg",
      "width": 323,
      "height": 449
    },
    {
      "url": "3.jpg",
      "width": 1200,
      "height": 635
    },
    ...
];

3. Initialize the plugin and append the photo gallery to a specific container.

<div id="gallery"></div>

$(function(){
  $('#gallery').flexPhotoGallery({
    imageArray: imageArray
  });
});

4. Disable the gallery lightbox mode. Default: true.

$(function(){
  $('#gallery').flexPhotoGallery({
    imageArray: imageArray,
    isViewImageOnClick: false
  });
});

Changelog:

2020-02-26

• Update jquery.flex-photo-gallery.css

---

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