Introduction

flowgallery.js is a robust and versatile image gallery. Works well with images of different sizes (i.e. mixed landscape and portrait) or same sized images.

Usage

The required markup for the image gallery is a simple unordered list of images. Any text set in the "title" attribute of the image will be displayed in a caption below the image.
<ul id="gallery">
  <li><img src="..." title="image caption text" alt="image" /></li>
  <li><img src="..." title="image caption text" alt="image" /></li>
  <li><img src="..." title="image caption text" alt="image" /></li>
  <li><img src="..." title="image caption text" alt="image" /></li>
  <li><img src="..." title="image caption text" alt="image" /></li>
  <li><img src="..." title="image caption text" alt="image" /></li>
</ul>
For basic usage, select the appropriate list and initialize as follows:
$("#gallery").flowGallery();
Per default active images will be displayed at their full size and all others in a scaled down version as thumbnails.

Additional CSS styling is not required for the gallery to work, but a few things can be done to improve the experience:
#gallery {
  visibility: hidden;
}
#gallery li.loading {
  background: url(../images/spinner.gif) no-repeat center center;
}
#gallery p.fg-caption {
  ...
}

Config Options

Property Type Default Description
activeIndex integer 0 the index of the image that should initially be loaded as active
animate boolean true should the image transitions be animated
backgroundColor string "black" the background color of the border and caption
duration integer 900 duration setting for animations
easing string "linear" easing method to use for animation
enableKeyNavigation boolean true specifies if arrow keys (left and right) can be used for navigation
forceHeight false|integer false if specified, sets all images to this height
forceWidth false|integer false if specified, sets all images to this width
forwardOnActiveClick boolean true specifies if next image should be shown when clicking on active image
imagePadding integer 4 the visible border around active images
loadingClass string "loading" CSS class applied to <li> elements while image is loading, should be used to specify background loading image
loadingHeight integer 60 image width to use for placeholder image while loading if cannot be determined
loadingWidth integer 100 image height to use for placeholder image while loading if cannot be determined
thumbHeight "auto"|integer "auto" the height of image thumbnails or 'auto', calculated based on aspect ratio from thumbWidth
thumbPadding integer 3 the visible border around thumbnails
thumbTopOffset "auto"|integer "auto" the top offset of all thumbnails or 'auto' to center based on active image
thumbWidth "auto"|integer "auto" the width of the image thumbnails or 'auto', calculated based on aspect ratio from thumbHeight (value set to 100px if both thumbWidth and thumbHeight are set to 'auto')

API

The API object can be accessed through jQuery's data method. This will return a API wrapper object "FlowGalleryApi" - this is used to interact with the gallery.
var flowgallery = $("#gallery").data('flowgallery');
flowgallery.next();
Method Returns Description
disable() FlowGalleryApi disable gallery, disable any event listeners; useful when hiding gallery
enable() FlowGalleryApi enable gallery
getLength() number get number of images in gallery
getOptions() Object get current configuration options of gallery - these are the passed options merged with the defaults
jump(index) FlowGalleryApi move to image with specified index
isEnabled() boolean is the gallery currently enabled?
next() FlowGalleryApi move to next image
prev() FlowGalleryApi move to previous image

Demos

Default Settings

  • image 1
  • image 2
  • image 3
  • image 4
  • image 5
  • image 6
  • image 7
  • image 8
<ul id="gallery"> 
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 1" title="image 1" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 2" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 3" title="image 3" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 4" title="image 4" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 5" title="image 5" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 6" title="image 6" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 7" title="image 7" /></li>
  <li><img src="http://ima.gs/020202/ddd/none/500x350.png" alt="image 8" title="image 8" /></li>
</ul>
$('#gallery').flowgallery({
  easing: 'easeOutCubic'
});

Dependencies

required: jQuery (tested with v1.4+).
optional: jQuery Easing Plugin (recommended, for nicer animations).

Download

latest stable version: flowgallery_v0.6.5.zip

Version 0.7.0 will be released soon, which is a complete refactor of the plugin, this documentation reflects this upcoming version. If you're feeling adventurous then grab the latest code from github.

Please report any issues on the Github Issue Tracker.