A highly extensible interface widget
[ Docs | Github | The Forge | 1.0 Demo Site ]
playSlideShow
dataAttribute
option to configure the element attribute to find transition data onSlideShow.useCSS
(not used here) reassigns non-css transitions to the css transitionsExtensible mid-level class that manages transitions of elements that share the same space, typically for slideshows, tabs, and galleries.
Options, Events, Loop
var mySlideShow = new SlideShow(element, options);
7000
) Milliseconds between slide transitions.crossfade
) The transition animation for all slides.7000
) Duration of the transition animation.false
) Calls play
upon initialization.data-slideshow
) The element attribute from which to pull transition options.> *
) The selector used to find the slides relative to the slideshow element.onShow(slideData)
mySlideShow.addEvent('show', function(slideData){
slideData.next.element; // the actual DOM element
slideData.next.index; // the index of the element in the slideshow
slideData.previous.element;
slideData.prevoius.index;
});
onShowComplete(slideData)
onShow
.Transitions from one slide to another.
mySlideShow.show(what, [options]);
next
- shows the next slideprevious
- shows the previous slideThis SlideShow instance.
mySlideShow.show('next');
mySlideShow.show('previous');
mySlideShow.show(2); // index
mySlideShow.show($('some-slide')); // element reference
// change the duration and transition
mySlideShow.show('next', {
duration: '4000',
transition: 'pushLeft'
});
Called automatically in the constructor, unless a noSetup
option is provided. Initializes the slideshow, you can reinitialize on demand. Mostly useful when slides are dynamically added.
mySlideShow.setup([options]);
This SlideShow instance.
mySlideShow.setup({
delay: 5000
});
Auto-plays the slideshow on the options.delay
.
mySlideShow.play();
This SlideShow instance.
Pauses the auto-play.
mySlideShow.pause();
This SlideShow instance.
Reverses the slideshow auto-play direction.
mySlideShow.play();
mySlideShow.reverse(); // going backward now
mySlideShow.reverse(); // going forward now
This SlideShow instance.
Adds a custom transition to the SlideShow class to be used in any instances.
SlideShow.defineTransition(name, function(data){
// code
});
function(data)
data.previous
the previous slide elementdata.next
the next slide elementdata.duration
how long the transition should lastdata.instance
the instance of SlideShowSlideShow.defineTransition('flash', function(data){
// hide the "current" slide immediately
data.previous.setStyle('display', 'none');
// fade out the next slide immediately
data.next.setStyle('opacity', 0);
// fade the next slide in, creating a "flash" effect
new Fx.Tween(data.next, {
duration: data.duration,
property: 'opacity'
}).start(1);
});
When a transition starts:
z-index
is 1
so it’s on top.z-index
is 0
so it’s behind.display:none
duration
is met, the previous slide will be reset to display: none
, and all other styles wiped out, so you don’t need to worry about removing styles you’ve changed during the transition.Same as defineTransition
except that it takes an object map of transition names and functions.
SlideShow.defineTransitions({
flash: function(){
// code
},
'bounce-slide': function(){
// code
}
});
Contains an element reference to the current slide.
slideshow.current
Contains the index of the current slide. Useful when varying transitions dependent upon the current slide.
slideshow.index
A collection of element references of all slides.
slideshow.slides
Custom Native to allow all of its methods to be used with any DOM element via the dollar function $.
Element shortcut method to create a slideshow instance with this element.
$('slide-container').playSlideShow(options);
autoplay
will be ignored.Element shortcut method to pause a slideshow instance created with the playSlideShow
method.
$('slide-container').pauseSlideShow();
Each slide has its index stored with it.
element.retrieve('slideshow-index');
Deprecated, use show('next')
.
Deprecated, use show('previous')
.
Deprecated, use setup(options)
.
Deprecated, use addTransition
This release brings with it lots of new features, better performance, and less code, what more could you ask for?
showNext
-> show('next')
showPrevious
-> show('previous')
SlideShow.add
-> SlideShow.defineTransition
SlideShow.defineTransitions
- define multiple transitions at oncesetup
method initializes everything, reinitialize on-demandnoSetup
option to prevent initializing everythingdataAttribute
option for which element attribute to parseselector
option, select whichever elements you want instead of just immediate childrendata
object is passed to defineTransition
instead of several argsslideshow-index
stored with themindex
property containing index of the current slide