Extensible mid-level class that manages transitions of elements that share the same space, typically for slideshows, tabs, and galleries.
View the demo site for real world examples.
View the Docs for all methods and details.
onShow
onShowComplete
onPlay
onPause
onReverse
New in 2.0, SlideShow.CSS
has a method to override JS animations with CSS3 animations. Still experimental.
HTML
SlideShow naturally grabs all children elements of a parent as the slides.
#HTML
<div id=slideshow>
<div>Slide 1</div>
<img src=image.jpg>
<div>Slide 3</div>
</div>
CSS
Most transitions require absolutely positioned slides with top and left set to 0. SlideShow doesn't do this for you, keeping it more flexible for all types of transitions:
#CSS
#slideshow {
width: 500px;
height: 300px;
overflow: hidden;
position: relative; /* not required, slideshow will set this for you */
}
#slideshow > * {
position: absolute; /* required for most transitions */
top: 0; /* ditto */
left: 0; /* ditto */
width: 100%; /* usually required */
height: 100%; /* same */
}
JavaScript
#JS
var slideshow = new SlideShow('slideshow', {
transition: 'fadeThroughBackground',
delay: 5000,
duration: 400,
autoplay: true
});
HTML
SlideShow can get all of the information it needs from the data-slideshow
attribute in your HTML, and allows you to have different transitions for each slide.
#HTML
<div id=slideshow data-slideshow="transition:fade delay:4000 duration:750">
<div data-slideshow="transition:pushUp">Slide 1</div>
<img data-slideshow="transition:slideRight" src=image.jpg>
<div data-slideshow="transition:blindDown duration:1000">Slide 3</div>
</div>
JavaScript
#JS
var slideshow = new SlideShow('slideshow');
First include the SlideShow.CSS.js
file. You'll then want to verify if the browser supports CSS transitions and transforms, I typically use Modernizr:
#JS
if (Modernizr.csstransitions && Modernizr.csstransforms){
SlideShow.useCSS();
}
Browsers that support transitions and transforms will use the new CSS transitions instead of JavaScript.
slideshow.show('next');
slideshow.show('previous');
slideshow.show(2); // shows the third slide
slideshow.play();
$$('.some-elements-in-the-order-of-the-slides').each(function(item, index){
item.addEvent('click', function(){
slideshow.show(index);
});
});
You can create whatever transitions you need with the SlideShow defineTransition
function.
SlideShow.defineTransition('flash', function(data){
data.previous.setStyle('display', 'none');
data.next.setStyle('opacity', 0);
new Fx.Tween(data.next, {
duration: data.duration,
property: 'opacity'
}).start(1);
});