Flexbox Based Responsive Justified Layout With jQuery - Flex Gallery

Flexbox Based Responsive Justified Layout With jQuery - Flex Gallery
File Size: 13.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Flex Gallery is a jQuery plugin which makes use of CSS3 Flexible Box to create a responsive, justified grid layout and gallery for showcasing your images in a Google Photos-like fashion.

How to use it:

1. Import the jQuery Flex Gallery plugin and other required resources into your html document.

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

2. Define an array of images to be presented in the responsive and justified gallery.

mediaList = ['1.jpg', '2.jpg', '3.jpg', ...];

3. Create a container in which you want to display the image gallery.

<div id="container"></div>

4. Import the images into the gallery.

// * @param {Array} imgs - the image list to be displayed
// * @param {Boolean} shuffling - whether to shuffle the image list or not
$('#container').addFlexImages(mediaList, true)

5. Activate the plugin and done.

$('#container').addFlexImages(media_list, true).flexGallery({
  // options here
});

6. All possible plugin options with default values.

$('#container').addFlexImages(media_list, true).flexGallery({
  margin: '0.5vmin',
  minHeightRatio: 0.25,
  fadeInDuration: 1000,
  checkPeriod: 100
});

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