How to install
Step 1: Add required files
First and most important, the jQuery library needs to be included. Next, download the package from this site and link the Flexbox Gallery Javascript file & Flexbox Gallery CSS file.
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Flexbox Gallery Javascript file -->
<script src="/js/lib/flexbox-gallery.js"></script>
<!-- Flexbox Gallery CSS file -->
<link href="/js/lib/flexbox-gallery.css" rel="stylesheet" />
Step 2: HTML markup
Create a <div id="container">
element, with a <div>
or <figure>
for each image.
<div id="container">
<figure><img src="/images/pic1.jpg" /></figure>
<figure><img src="/images/pic2.jpg" /></figure>
<figure><img src="/images/pic3.jpg" /></figure>
<figure><img src="/images/pic4.jpg" /></figure>
</div>
Step 3: Call the Flexbox Gallery
Call .flexgal() on <div id="container">
$(document).ready(function(){
$('#container').flexgal();
});