Slideshow extension for MooTools.

Christmas Cactus
Christmas Cactus
Christmas Cactus Orchid Tulip Snapdragons Asiatic Lilies Dianthus 'Firewitch' Unknown.  Can you Identify? Peonies Bearded Iris

Mootools Extensions » sfSlideshow(fullsizeDiv, thumbsDiv, options)


Slideshow extension for MooTools.


  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.


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.



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


<div id="photo">
	<div id="mainpic"><img src="/mootools/samples/photos/_MG_2871.jpg" alt="Christmas Cactus" /></div>
	<div id="caption">
		Christmas Cactus
<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 id="photonav">
	<a href="#prev" id="linkprev">Previous</a> - <a href="#next" id="linknext">Next</a>


#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!