sfSlideshow

Description

Slideshow extension for MooTools.

Arguments

1. fullsizeDiv - (mixed) The Element for the div wrapping the main photo, or its string id.
2. thumbsDiv - (mixed) The Element for the div wrapping the thumbnail links, its string id, or an array of the links themselves.
3. options - (object, optional) An object containing any of the options below.

Options

option	type	default	description
captions	mixed	false	The Element you want captions placed in, or its string id. Set to false if you don't want captions displayed.
crossfade	boolean	false	If true, the new image will begin fading in as soon as it has finished preloading, even if the old image has not finished fading out. If false, the new image will not begin fading in until the old image has finished fading out.
duration	integer	300	The amount of time the transition should take, higher numbers result in longer transitions. Value is in milliseconds (1000 = 1 second).
linkNext	mixed	false	The Element to use as a next link for scrolling through photos, or its string id.
linkPrev	mixed	false	The Element to use as a previous link for scrolling through photos, or its string id.
loop	boolean	false	If true, clicking the previous/next links when at the end of the range will loop back around to the other side. If false, the click will be ignored.
scrollOffset	integer	0	Offset the y-position (height) when scrolling the fullsizeDiv element back in to view. Only applies if scrollToMain is true.
scrollToMain	boolean	false	If true, scrolls the viewing window back to the location of the fullsizeDiv element anytime the photo is changed.
setActive	boolean	true	If true, tags the starting thumbnail with the class "active" during the initialization routine.
start	integer	0	Starting thumbnail index.
transition	function	Fx.Transitions.linear	MooTools transition function to use for the opacity fade. I recommend using Fx.Transitions.linear or an easeIn transition when crossfading is on, and an easeOut transition when crossfading is off.
onChange	function	Class.empty	Event fired when the photo is changing. Occurs after new thumbnail is marked as active, after scrolling back to the main photo area, after the old image begins fading out, after the new image has started preloading, and after the new caption is swapped in.
onFaded	function	Class.empty	Event fired after current photo finishes fading out. If crossfading is off, this occurs before the new photo begins fading in.

Example

JavaScript:

function loader() {
	 var mainss = new sfSlideshow($('mainpic'), $('thumbs'), {
		captions: $('caption'),
		crossfade: true,
		linkNext: $('linknext'),
		linkPrev: $('linkprev'),
		scrollToMain: true,
		scrollOffset: -15
	});
}
window.addEvent('domready', loader);

HTML:

<div id="photo">
	<div id="mainpic"><img src="/mootools/samples/photos/_MG_2871.jpg" alt="Christmas Cactus" /></div>
	<div id="caption">
		Christmas Cactus
	</div>
</div>
<div id="thumbs">
	<a href="/mootools/samples/photos/_MG_2871.jpg"><img src="/mootools/samples/thumbs/_MG_2871.jpg" alt="Christmas Cactus" /></a>
	<a href="/mootools/samples/photos/_MG_5508.jpg"><img src="/mootools/samples/thumbs/_MG_5508.jpg" alt="Orchid" /></a>
	<a href="/mootools/samples/photos/_MG_5558.jpg"><img src="/mootools/samples/thumbs/_MG_5558.jpg" alt="Tulip" /></a>
	<a href="/mootools/samples/photos/_MG_5569.jpg"><img src="/mootools/samples/thumbs/_MG_5569.jpg" alt="Snapdragons" /></a>
	<a href="/mootools/samples/photos/_MG_5580.jpg"><img src="/mootools/samples/thumbs/_MG_5580.jpg" alt="Asiatic Lilies" /></a>
	<a href="/mootools/samples/photos/_MG_5625.jpg"><img src="/mootools/samples/thumbs/_MG_5625.jpg" alt="Dianthus 'Firewitch'" /></a>
	<a href="/mootools/samples/photos/_MG_5652.jpg"><img src="/mootools/samples/thumbs/_MG_5652.jpg" alt="Unknown.  Can you Identify?" /></a>
	<a href="/mootools/samples/photos/_MG_5654.jpg"><img src="/mootools/samples/thumbs/_MG_5654.jpg" alt="Peonies" /></a>
	<a href="/mootools/samples/photos/_MG_5677.jpg"><img src="/mootools/samples/thumbs/_MG_5677.jpg" alt="Bearded Iris" /></a>
</div>
<div id="photonav">
	<a href="#prev" id="linkprev">Previous</a> - <a href="#next" id="linknext">Next</a>
</div>

CSS:

#photo {
	background: white;
	border: 1px solid #ccc;
	margin: 10px;
	padding: 5px;
	width: 450px;
}
#mainpic {
	background: #ccc;
	margin-bottom: 5px;
}
#caption {
	text-align: center;
}
#thumbs {
	margin: 10px;
}
#thumbs a {
	outline: none;
}
#thumbs a img {
	background: white;
	border: 1px solid #ccc;
	padding: 3px;
}
#thumbs a:hover img {
	border: 1px solid green;
}
#thumbs a.active img,
#thumbs a.active:hover img {
	border: 1px solid red;
}

Files for MooTools v1.2 NEW!

• sfSlideshow.js (full source, 7k)
• sfSlideshow.packed.js (packed source, 3k)
• Sample CSS