Home » Web Programming » Fluid and Responsive Image gallery with jQuery – flexImages

Fluid and Responsive Image gallery with jQuery – flexImages

Creating a fluid and responsive image gallery with a jquery plugin is very easy. Fleximage is a jQuery plugin to create fluid image galleries found in google images and flickr. Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+. No dependencies except the jQuery library.


  • Very small: 1.2 kB of JavaScript – less than 0.6 kB gzipped
  • Source images/objects can have any size
  • Works with more than just images, e.g. videos, iframes and plain text or any containers
  • Responsive Gallery. fit for devices from mobile to large tvs.
  • Equal margins between images controlled via CSS
  • No cropping or reordering
  • AJAX ready, e.g. for infinite scrolling
  • Support for lazy loading of images and iframe contents
  • Layout options to control e.g. the maximum number of rows – or whether or not to display an incomplete (last) row.


Usage of Fleximages

Include the stylesheet jquery.flex-images.css in the <head> section of your HTML document – and the JavsScript file jquery.flex-images.min.js after loading jQuery. flexImages accepts settings from an object of key/value pairs.

$(selector).flexImages({key1: value1, key2: value2});

To update any settings or to reload modified content, simply re-initialize flexImages again on the appropriate container. The plugin automatically prevents multiple bindings to one and the same element. This may be used for content that gets modified later on via AJAX.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.