SlideShow - a Highly Extendable MooTools Javascript Slideshow
By Ryan Florence, published 2010-01-01
Part of the issue Migrated Articles From Original Site Structure..
It seems with every new brochure-type website I worked on I was coming up a with a new slideshow/gallery widget. I’d download other great ones like BarackSlideshow, Floom etc. but they didn’t always fit the bill with what I or the designer I was working with wanted–don’t get me wrong, those scripts are great.
Finally I made Slideshow, the ultimate slideshow class. It handles all of the basics of a good javascript gallery and nothing else. No skins, no new elements, no navigation, just the slideshow basics. It implements another one of my scripts, Loop, to handle the autoplay.
Download and links
Download it from the Forge, check out the MooDoc, fork it on github.
Features
- Autoplay
- Reverse
- Show next slide
- Show previous slide
- Show arbitrary slide
- Transitions by slide
- Durations by slide
- Default transitions
- Default durations
- Several events
Sample code
Store the slides in a container with transition information on their class attribute.
#HTML
<div id="slideshow">
<div class="transition:crossFade duration:1000">1</div>
<div>2</div> <!-- gets default transition and duration -->
<div class="transition:blindRightFade duration:400">3</div>
<div class="transition:fade duration:1000">4</div>
<div class="transition:pushUp duration:2000">5</div>
<div class="transition:pushDown duration:500">6</div>
</div>
Construct it like any other class
mySlideShow = new SlideShow('slideshow');
Demo
Transitions
Rather than having built in transitions (or just a single transition) I borrowed some inspiration from FormValidator and added transitions similar to how FormValidator adds input validation rules. This makes it easy to create your own awesome transitions. Here are the packaged transitions:
- fade
- crossFade
- fadeThroughBackground
- pushLeft, pushRight, pushUp, pushDown
- blindLeft, blindRight, blindUp, blindDown
- blindLeftFade, blindRightFade, blindUpFade, blindDownFade
Adding transitions is a snap. The Class itself has an add function that takes two arguments: the name of the transition, and the function to control it.
So here are a few examples:
SlideShow.add('fade', function(previous, next, duration, instance){
previous.set('tween',{duration: duration}).fade('out');
return this;
});
Pretty simple. Since the next slide is directly behind the previous, we can just fade out the previous slide and there’s our new one.
SlideShow.add('blindLeft', function(previous, next, duration, instance){
var distance = instance.element.getStyle('width').toInt();
next.setStyles({
'left': distance,
'z-index': 2
}).set('tween',{duration: duration}).tween('left', 0);
return this;
});
A bit more complicated. First we have to measure the distance our slide needs to travel, then we set it’s left style to be totally out of the slideshow view and change it’s z-index from 0 to 2 so it’s above the previous slides z-index: 1. Once it’s all setup we just tween left back to 0. Our slide smoothly slides over the the previous slide.
SlideShow.add('blindLeftFade',function(p, n, d, i){
this.blindLeft(p,n,d,i).fade(p,n,d,i);
});
this references the object containing all of the transitions so you can chain effects.
Extend it!
I built this as a base for any slideshow. A slide show framework as it were. I have extended this and used it as is already for several projects and I’m in love with it. Adding a navigation piece could be as simple as:
var slideLabels = $$('some-elements-in-the-same-order-as-the-slides');
slideLabels.each(function(el, index){
el.addEvent('click',function()
mySlideShow.show(index);
});
});
Of course, it’d make more sense to wrap it up in a class, but you get the point. Look forward to several more posts using slideshow here and the forge (three with awesome WordPress integration.)
Download it from the Forge, check out the MooDoc, fork it on github.
