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>
$("#gallery").flowGallery();Additional CSS styling is not required for the gallery to work, but a few things can be done to improve the experience:
- As the page is loading, to avoid displaying gallery images before the script is loaded, we recommend setting "visibility=hidden" for any galleries. After loading is complete, the script will automatically set "visibility=visible".
- It is also recommended to set a loading image through CSS to be used while images are being loaded (especially when loading remote images). The used CSS class can be configured with the "loadingClass" config parameter.
- The caption text can be styled through the "fg-caption" class.
#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
<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.