Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
jQuery plugin for cover flow image gallery
JavaScript
tag: v0.6.4

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
demo
.gitignore
CHANGELOG
README.textile
jquery.flowgallery.js
jquery.flowgallery.min.js

README.textile

FlowGallery

jQuery plugin for image galleries with a cover flow effect.

Demo: http://lucidgardens.com/flowgallery

Usage

The required markup for the image gallery is a simple unordered list of images:

<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({
  easing: 'easeOutCubic',
  imagePadding: 6
});

There are a number of optional configuration parameters that can be used to customize the plugin:

  • activeIndex – (integer) the index of the image that should initially be loaded as active, default: 0
  • animate – (boolean) should the image transitions be animated, default: true
  • enableKeyNavigation – (boolean) specifies if arrow keys (left and right) can be used for navigation, default: true
  • forwardOnActiveClick – (boolean) specifies if next image should be shown when clicking on active image, default: false
  • forceWidth – (false | integer) if specified, sets all images to this width, default: false
  • forceHeight – (false | integer) if specified, sets all images to this height, default: false
  • backgroundColor – (string) the background color of the border and caption, default: "black"
  • thumbWidth – (‘auto’ | integer) 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’), default: "auto"
  • thumbHeight – (‘auto’ | integer) the height of image thumbnails or ‘auto’, calculated based on aspect ratio from thumbWidth, default: "auto"
  • thumbTopOffset – (‘auto’|integer) the top offset of all thumbnails or ‘auto’ to center based on initial active image, default: "auto"
  • imagePadding – (integer) the visible border around active images, default: 4
  • thumbPadding – (integer) the visible border around thumbnails, default: 3
  • loadingClass – (string) CSS class applied to <li> elements while image is loading, should be used to specify background loading image, default: "loading"
  • easing – (string) easing method to use for animation, default: "linear"
  • duration – (string|integer) duration setting for animations, default: 900

The gallery works best if full width of browser window can be used. No direct CSS styling of gallery list required, the plugin sets everything up as needed. Be careful if you do any CSS styling of the list, this could break functionality.

The only CSS styling needed, is for the loading image as specified by the ‘loadingClass’ attribute. Here is an example, adjust accordingly:

#gallery li.loading {
  background: url(../images/spinner.gif) no-repeat center center;
}

Dependencies

Browser Compatibility

Tested under:

  • Firefox 3.5+
  • Safari 5
  • Chrome 4+
  • Opera 11
  • IE7+

Licensing

Copyright © 2011 Boris Searles, released under both MIT and GPL version 2 license.

Something went wrong with that request. Please try again.