Demo

Usage

  1. Download the latest version of Galleriffic and jQuery-1.2.6 (Use other versions of jQuery at your own risk)
  2. View the source of this page to see a full-featured example setup. All container selectors are optional, so you may choose to not include an area (such as the download link, description, etc.). Here is an example of the essential elements needed for a full-featured setup: 
    <div id="{controlsContainerSel}"></div>
<div id="{imageContainerSel}"></div>
<div id="{titleContainerSel}"></div>
<div id="{descContainerSel}"></div>
<a id="{downloadLinkSel}">Download Original</a>
<div id="{thumbsContainerSel}">
	... graceful degrading list of thumbnails (specific format specified below) ...
</div>
  3. Setup the script references in your html page: 
    <head>
	...
	<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="jquery.galleriffic.min.js"></script>
	...
</head>
  4. Within the thumbnails container {thumbsContainerSel}, build your graceful degrading list of thumbnails linking to the image slides as such: 
    <ul class="noscript">
	<li>
		<a href="{imageSlideUrl}" original="{imageOriginalUrl}" title="{imageTitle}" description="{imageDescription}">
			<img src="{imageThumbUrl}" alt="{imageTitle (again for graceful degradation)}" />
		</a>
	</li>
	... (repeat for every image in the gallery)
</ul>
  5. Initialize the gallery by calling the galleriffic init function, passing in the thumbnails container selector and an options. The following example shows the default options: 
    $(document).ready(function() {
	var gallery = $('#gallery').galleriffic('{thumbsContainerSel}', {
		delay:                3000,
		numThumbs:            20,
		preloadAhead:         40, // Set to -1 to preload all images
		enableTopPager:       true,
		enableBottomPager:    true,
		imageContainerSel:    '',
		controlsContainerSel: '',
		titleContainerSel:    '',
		descContainerSel:     '',
		downloadLinkSel:      '',
		renderSSControls:     true,
		renderNavControls:    true,
		playLinkText:         'Play',
		pauseLinkText:        'Pause',
		prevLinkText:         'Previous',
		nextLinkText:         'Next',
		nextPageLinkText:     'Next &rsaquo;',
		prevPageLinkText:     '&lsaquo; Prev'
	});
});

Download

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

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.