(Demo | Download)
A highly customizable gallery/showcase plugin for jQuery.
Features
Choose effect, should the image slide in, or fade in?
Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
jQuery call returns gallery instances, which enables you to change settings on the fly like the "Change to fade effect" link above
Keyboard arrows to move back and forth
Click on the edge of the big image to go to the next/previous
Images are preloaded, and if the aren't finished loading when they are supposed to be displayed, a loading image will appear
Slideshow count down only begins when the image has loaded and is visible
Image title, can either be set in the title attribute, or in elm.data('ad-title', 'My title here'). $.data takes precedence over the title attribute
Image descriptions, can either be set in the longdesc attribute, or in elm.data('ad-desc', 'My description here'). $.data takes precedence over the longdesc attribute
Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
Takes the dimensions of the image container div and scales down images that are larger than it
Image is positioned in the middle if it's smaller than the container div
Images that are larger than the container are scaled down to fit inside the container
Browser compatibility
The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know.
A highly customizable gallery/showcase plugin for jQuery.
Features
Choose effect, should the image slide in, or fade in?
Show fifth image by adding #ad-image4 to the url, this takes precedence over over settings.start_at_index
jQuery call returns gallery instances, which enables you to change settings on the fly like the "Change to fade effect" link above
Keyboard arrows to move back and forth
Click on the edge of the big image to go to the next/previous
Images are preloaded, and if the aren't finished loading when they are supposed to be displayed, a loading image will appear
Slideshow count down only begins when the image has loaded and is visible
Image title, can either be set in the title attribute, or in elm.data('ad-title', 'My title here'). $.data takes precedence over the title attribute
Image descriptions, can either be set in the longdesc attribute, or in elm.data('ad-desc', 'My description here'). $.data takes precedence over the longdesc attribute
Callbacks on different events that has access to the internal object, which means that you can access all internal methods, etc
Takes the dimensions of the image container div and scales down images that are larger than it
Image is positioned in the middle if it's smaller than the container div
Images that are larger than the container are scaled down to fit inside the container
Browser compatibility
The script has currently been tested in Firefox 3/Win, Firefox 3.5/Mac, IE6+7+8/Win, Chrome 2/Win, Safari 3/Win, Safari 4/Mac, Opera 9/Win, Opera 9/Mac. If you have seen it working correctly in some other browser, or on some other platform, please let me know.