Galleriffic

A jQuery plugin for rendering fast-performing photo galleries

Galleriffic was inspired by Mike Alsup's Cycle plugin, but with performance in mind for delivering a high volume of photos. This is my first experiment with jQuery, so I would love feedback on how to improve this plugin. I am not so great at spelling, and it was much later that I realized that the more appropriate spellings would be Gallerific or Gallerrific, but is too late now for a name change, so Galleriffic remains.

Examples

Features

Usage

  1. Download the latest version of Galleriffic below and jQuery 1.2.6 or later (use other versions of jQuery at your own risk)
  2. Setup the script references in the header: 
    <head>
	...
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
	...
</head>
  3. Add container elements to your page. All container elements are optional, so you may choose to not include an area (such as the loading or caption container elements). Here is an example of all the elements needed for a full-featured setup: 
    <div id="controls"></div>
<div id="loading"></div>
<div id="slideshow"></div>
<div id="caption"></div>
<div id="thumbs">
	... graceful degrading list of thumbnails (specific format specified below) ...
</div>
  4. Within the thumbnails container element, build your graceful degrading unordered list of thumbnails linking to the image slides as such: 
    <ul class="thumbs noscript">
	<li>
		<a class="thumb" href="path/to/slide" title="your image title">
			<img src="path/to/thumbnail" alt="your image title again for graceful degradation" />
		</a>
		<div class="caption">
			(Any html can go here)
		</div>
	</li>
	... (repeat for every image in the gallery)
</ul>
    It is important to specify the 'thumb' class for the link that should serve as the thumbnail and the 'caption' class for the element that should serve as the caption. When an image is selected for display in the slideshow, any elements with the 'caption' class will be rendered within the specified caption container element above.
  5. Initialize the gallery by calling the galleriffic initialization function with two arguments, the thumbnails container selector and an options hash. The following example shows the default options: 
    $(document).ready(function() {
	var gallery = $('#gallery').galleriffic('#thumbs', {
		delay:                  3000, // in milliseconds
		numThumbs:              20, // The number of thumbnails to show page
		preloadAhead:           40, // Set to -1 to preload all images
		enableTopPager:         false,
		enableBottomPager:      true,
		imageContainerSel:      '', // The CSS selector for the element within which the main slideshow image should be rendered
		controlsContainerSel:   '', // The CSS selector for the element within which the slideshow controls should be rendered
		captionContainerSel:    '', // The CSS selector for the element within which the captions should be rendered
		loadingContainerSel:    '', // The CSS selector for the element within which should be shown when an image is loading
		renderSSControls:       true, // Specifies whether the slideshow's Play and Pause links should be rendered
		renderNavControls:      true, // Specifies whether the slideshow's Next and Previous links should be rendered
		playLinkText:           'Play',
		pauseLinkText:          'Pause',
		prevLinkText:           'Previous',
		nextLinkText:           'Next',
		nextPageLinkText:       'Next &rsaquo;',
		prevPageLinkText:       '&lsaquo; Prev',
		enableHistory:          false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes 
		autoStart:              false, // Specifies whether the slideshow should be playing or paused when the page first loads 
		onChange:               undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
		onTransitionOut:        undefined, // accepts a delegate like such: function(callback) { ... }
		onTransitionIn:         undefined, // accepts a delegate like such: function() { ... }
		onPageTransitionOut:    undefined, // accepts a delegate like such: function(callback) { ... }
		onPageTransitionIn:     undefined  // accepts a delegate like such: function() { ... }
	});
});

Download

Use one of the following links to download latest (release 1.0):

Extras

I put together a jAlbum skin to make building static albums a breeze. Check it out here.

Feedback

I made alot of assumptions based on my own personal needs, so please make your needs known here and I will take them into consideration for future releases. I'd also like to keep a list of sites making use of Galleriffic, so if this is you, please email me (trent [at] twospy.com) your Web site's URL and indicate whether or not I may list it publicly.

Donate

If you find Galleriffic useful and would sleep better knowing you gave something back, feel free to make a donation!