Lightweight & Flexible Gallery Plugin with jQuery - flexImages

File Size: 255 KB
Views Total: 8799
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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>

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

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:


  • Fixed Incorrect width in Chrome.


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



  • Prevent memory leak.


  • Fixed IE 8 bug.


  • Fixed minor bug in width calculation of elements.


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


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