The ease way to create gallery for developing responsive, with CSS and jQuery

Get Started

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();
});

Get in touch

Twitter:
@henrrypirir

Personal:
Site

GitHub:
henrrypirir