Lightweight & Flexible Gallery Plugin with jQuery - flexImages

flexImages is a lightweight jQuery plugin to create a responsive, fluid and flexible gallery from a set of any Html elements that have different sizes. Includes support for lazy load, and Ajax loading content.

Basic Usage:

1. Load the jQuery library together with the jQuery fleximages plugin's stylesheet and script into your document.

<link rel="stylesheet" href="jquery.flex-images.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.flex-images.js"></script> 

2. Wrap the Html elements into container elements. The markup structure should be like this:

<div id="demo" class="flex-images">
  <div class="item" data-w="200" data-h="150"><img src="200x150.jpg"></div>
  <div class="item" data-w="250" data-h="150"><img src="250x150.jpg"></div>
  <div class="item" data-w="200" data-h="150"><img src="200x150.jpg"></div>
  <div class="item" data-w="150" data-h="150"><img src="150x150.jpg"></div>
  <div class="item" data-w="350" data-h="150"><img src="350x150.jpg"></div>
</div> 

3. Call the plugin on the parent element and set any options you want to override.

$('#demo').flexImages({
rowHeight: 140
});

4. All the options available.

// Selector of the individual image/object containers.
container: '.item', 

// Selector of the image/object inside a container.
object: 'img', 

// Maximum height of a row.
rowHeight: 180, 

// Maximum number of rows to display. Images/Objects exceeding this row are hidden.
maxRows: 0, 

// Hide incomplete last row of images/objects.
truncate: false

Change logs:

2015-12-05

• Fixed Incorrect width in Chrome.

2015-10-30

• Fixed error in calculation that caused the last image in each row to be cut off

2015-09-15

• fixed Zoom issue

2015-05-01

• Prevent memory leak.

2015-04-26

• Fixed IE 8 bug.

2015-04-14

• Fixed minor bug in width calculation of elements.

2015-04-06

• Show incomplete row even if (truncate = true) if it's the only row.

2015-04-05

• Fixed resize event for IE8.

v1.0.2 (2015-04-04)

• Improved rendering performance by using Vanilla JS
• Improved rendering time dramatically

---

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