Responsive Justified Gallery With Lightbox - flexbox-gallery

File Size: 3.26 KB
Views Total: 6360
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Responsive Justified Gallery With Lightbox - flexbox-gallery

flexbox-gallery is a tiny (~1kb) jQuery plugin used to create a responsive, justified photo gallery with lightbox integration using CSS3 flexible box and a little jQuery script.

How to use it:

1. Load the required JavaScript file flexbox-gallery.js and stylesheet flexbox-gallery.css in your html document.

<link href="flexbox-gallery.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="flexbox-gallery.js"></script>

2. Add a group of images to the gallery following the markup structure as this:

<div id="container">
  <figure>
    <img src="1.jpg">
  </figure>
  <figure>
    <img src="2.jpg">
  </figure>
  <figure>
    <img src="3.jpg">
  </figure>
  <figure>
    <img src="4.jpg">
  </figure>
  ...
</div>

3. Call the function on the top container and the plugin will do the rest.

$('#container').flexgal();

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