jQuery flexImages Plugin

Live Demo

More Examples

Please take a look at the source code of this page to see how these demos work.

1. Fixed number of two complete rows with lazy loading of images; only images that are actually visible are retrieved from the server:

For lazy loading of images or iframes, it's required to use a "blank.gif" pixel as the source of all images. The actual source URL must be given in a data-src attribute of the image. On init, the plugin will replace the dummy src attribute (blank.gif) with the actual source URL for all visible images.

2. A fluid grid with video content and only full rows:

3. Showing a title underneath + less margin between images:

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5

4. Overlaying caption - could be a link or a button, as well:

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5

5. Cut off parts of the images, e.g. a Shutterstock ID:

Original (uncut) first image with Shutterstock ID at the bottom:

This plugin is used in production on Pixabay.com, where you can see flexImages at work in various locations and with all available options. Please report any bugs and issues at the GitHub repositiory.

This software is released as Open Source under the MIT License by Simon Steinberger / Pixabay.com.

Released 2014 by Pixabay.com