Justified Grid Layout Image Gallery / jQuery Flex Photo Gallery

Flex Photo Gallery is a responsive justified grid layout image gallery. This lightweight jQuery plugin offers to show your images in justified grid layout. The plugin also provide a basic lightbox / popup modal to show & navigate images with next and previous buttons.


Plugin Overview

Plugin: flexPhotoGallery
Author: Shubham Thakare
Licence: MIT Licence
Published: March 19, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 94 KB

How to Use Justified Grid Layout Image Gallery:

1. Load the jQuery and Normalize CSS into your HTML document.

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>

<!--Normalize CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" type="text/css">

2. Also include the flexPhotoGallery CSS and Javascript file into your web page.

<!--Flex Photo Gallery CSS-->
<link rel="stylesheet" href="dist/css/jquery.flex-photo-gallery.css">

<!--Flex Photo Gallery JS-->
<script src="dist/js/jquery.flex-photo-gallery.js"></script>

3. Define an array of image’s objects that contains image src, width and height attributes.

  var myImages =
   [
   {
     "url": "https://source.unsplash.com/1600x900/?beauty",
     "width": 1600,
     "height": 900
    },
   {
     "url": "https://source.unsplash.com/323x449/?cat",
     "width": 323,
     "height": 449
   },
   ----------------
   ----------------
   ----------------
]

4. Create a div element in which Flex Photo Gallery will be generated to show your images in justified grid layout.

<div id="myGallery"></div>

5. Initialize the plugin in jQuery document ready function.

$(document).ready(function(){
$('#myGallery').flexPhotoGallery({
	imageArray: myImages
   });
});

6. To off the popup image lightbox, trun the isViewImageOnClick to false. default: true

$('#myGallery').flexPhotoGallery({
	imageArray: myImages,
	isViewImageOnClick: false
});

Be the first to comment

Leave a Reply

Your email address will not be published.


*