jQuery Flex Photo Gallery

January 04, 2020 No comments jQuery Flex Photo Gallery

1. Introduction

flex-photo-gallery is a jQuery plugin for a responsive and justified photo gallery organized in a grid layout. The plugin provides the popup modal for viewing the selected image with the navigation buttons.

Jquery flex photo gallery

2. Plugin Overview

Library flex-photo-gallery
Author Shubham Thakare
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.3.1 or Latest version

Demo

3. How to install and use flex-photo-gallery jQuery plugin

Follow below steps to install flex-photo-gallery jQuery plugin.

1. Include the jQuery library and Normalize CSS into your HTML document:

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

<!--Normalize CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" type="text/css">
<!--Flex Photo Gallery CSS-->
<link rel="stylesheet" href="/jquery.flex-photo-gallery.css">

<!--Flex Photo Gallery JS-->
<script src="/jquery.flex-photo-gallery.js"></script>
var images =
[
    {
        "url" : "path_to_image",
        "width" : image_width,
        "height" : image_height
    },
    {
        "url" : "path_to_image",
        "width" : image_width,
        "height" : image_height
    },
    ........
];
<div id="photos"></div>
$('#photos').flexPhotoGallery({
    imageArray: images,
    isViewImageOnClick: true
});

flex-photo-gallery after activation will organize photos using justified grid layout.

4. Conclusion

In this article, we presented flex-photo-gallery jQuery plugin designed to present a responsive and justified photo gallery with details view shown on mouse click. This plugin should be useful for web designers and anyone who wants to present their creative work in the nice crafted photo gallery.

{{ message }}

{{ 'Comments are closed.' | trans }}