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 |
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.