Galleriffic is a jQuery plugin that provides a rich, post-back free experience optimized to handle high volumes of photos while conserving bandwidth. 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.
<head> ... <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <!-- Optionally include jquery.history.js for history support --> <script type="text/javascript" src="js/jquery.history.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> ... </head>
<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>
<div id="thumbs"> <ul class="thumbs noscript"> <li> <a class="thumb" name="optionalCustomIdentifier" 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> </div>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.
jQuery(document).ready(function($) {
var gallery = $('#thumbs').galleriffic({
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,
maxPagesToShow: 7, // The maximum number of pages to display in either the top or bottom pager
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 ›',
prevPageLinkText: '‹ Prev',
enableHistory: false, // Specifies whether the url's hash and the browser's history cache should update when the current slideshow image changes
enableKeyboardNavigation: true, // Specifies whether keyboard navigation is enabled
autoStart: false, // Specifies whether the slideshow should be playing or paused when the page first loads
syncTransitions: false, // Specifies whether the out and in transitions occur simultaneously or distinctly
defaultTransitionDuration: 1000, // If using the default transitions, specifies the duration of the transitions
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
});
});
I have been asked a lot if Galleriffic automatically generates the thumbnails and slides. Galleriffic by itself does not do any image processiong or generation; however, there is a great tool that does: jAlbum. I have created a jAlbum skin that I use myself for creating my personal galleries. After installing jAlbum and the Galleriffic jAlbum skin, simply choose your source image directory and an output directory, click "Make Album", and wallah, you now have a complete html gallery with 3 different size versions of each image.
With the stylesheet used in these examples, each thumbnail is floated left, and thus as many thumbnails that will fit in the width of the column will be displayed. If you want fewer or more columns, make the width of the navigation panel smaller or larger. In all but the last example, I am setting the width using javascript with the following lines in the html page:
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');
I put together a jAlbum skin to make building static albums a breeze. Check it out here.
The SVN repo is located at Google Code
For general feedback, please leave a comment here.
If you feel you have encountered a legitimate issue or have a valuable enhancement request, you are welcome to add it to the issues list which I am working off of 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.
If you find Galleriffic useful and would sleep better knowing you gave something back, feel free to make a donation!