Responsive Image Gallery with jQuery Lightbox

Category: Gallery | February 27, 2020
Responsive Image Gallery with jQuery Lightbox
Author: Shubham Thakare
Official Page: Go to Website
Last Update:March 3, 2020
License:MIT

Yet another jQuery plugin to create a responsive image gallery with a lightbox. The “Flex Photo Gallery” is a lightweight plugin for jQuery that allows you to build a CSS flex based image grid. You just need to add your image links in the plugin configuration options. Then this plugin will generate an awesome photo gallery magically.

This image gallery plugin gets the images links from an array and renders them into a wrapper dynamically. So, you don’t need to define HTML tags for each image individually. Besides this, you are also able to turn on/off the gallery lightbox using the plugin configuration option.

How to Create a Responsive Image Gallery

To create a responsive image gallery with a lightbox, we need to getting started with the jQuery “Flex Photo Gallery” plugin. So, first of all, load the jQuery JavaScript library into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

After that, include the gallery plugin assets (JavaScript and CSS files) into your project.

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

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

Now, create a container (a div element with a unique id) in which your gallery will be generated dynamically. Basically, it is a wrapper of your gallery. You can customize it according to your needs by adding any extra CSS class.

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

Now define the links, height & width values in an array and call the plugin in jQuery document ready function to active your flex gallery. You can pass both internal or external links for images in the “url” attribute. Similarly, you can set different width and height values for each image.

    $(document).ready(function() {

    var imageArray = 
    [
        {
            "url": "path/to/img1.jpg",
            "width": 1600,
            "height": 1067 
        },
        {
            "url": "path/to/img2.jpg",
            "width": 323,
            "height": 449
        },
        {
            "url": "path/to/img3.jpg",
            "width": 1200,
            "height": 635
        }
       
    ];


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

Plugin Configuration Options

The following are some available configuration options to customize the flex photo gallery.

OptionDefaultTypeDescription
imageArray“”ArrayAn array that contains a basic details of image URL, width and height properties.

Example:

$('#gallery').flexPhotoGallery({
	imageArray : [
	{
		"url" : "path_to_image",
		"width" : image_width,
		"height" : image_height
	},
	{
		"url" : "path_to_image",
		"width" : image_width,
		"height" : image_height
	},
	........
];,
});
isViewImageOnClicktrueBooleanThis option enable/disable lightbox in the gallery. So, if you want to turn it off, pass the false value.

Example:

$('#gallery').flexPhotoGallery({
	isViewImageOnClick : true,
});

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.