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.

Features

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

responsive-image-gallery

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