A JavaScript Prototype Class that takes a sequence of images or HTML elements and turns them into a Slide Show.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demos
images
javascripts
stylesheets
vendor
.gitignore
.gitmodules
README.textile
index.html

README.textile

Prototype SlideShow

A JavaScript Prototype Class that takes a sequence of images or HTML elements and turns them into a Slide Show.

Usage

The Prototype SlideShow class is dependent on Prototype > 1.6 and Scriptaculous effect.js.

To get started, put prototype.js and effects.js in a folder of your site, add them and slideshow.js in the <head> of your HTML document.

<script type="text/javascript" src="/javascripts/prototype.js" />
<script type="text/javascript" src="/javascripts/effects.js" />
<script type="text/javascript" src="/javascripts/slideshow.js" />
new SlideShow('listOfImages');

Options

Every SlideShow is different. The class provides plenty of options, allowing every SlideShow to tweaked as needed.

Option Type Default Value Description
autoPlay Boolean true When true, the SlideShow will automatically start looping over the slides.
slideDuration Number 5 The number of seconds that an individual slide will be visible.
transitionDuration Number 1 The number of seconds that a transition from one slide to another will occur.
loop Boolean true When true, the SlideShow will start over from the first slide when it is done displaying the last slide.
crossFade Boolean false When true, the SlideShow’s transition will simultaneously fade out a slide while fading in the next. This uses Effect.Parallel. If set to false, the next slide will wait for the previous one finish fading before appearing.
pauseOnMouseover Boolean true When true, if the mouse cursor hovers over the SlideShow area, the SlideShow will pause. Playback will resume upon mouseout.
slidesSelector String ‘> ∗’ A CSS selector that matches the intended slide elements. By default, selects the immediate descendants of the root SlideShow element.
startHidden Boolean true When true, at start of the SlideShow’s playback, the first slide will appear from a hidden state.
events Object { init: ‘dom:loaded’, play: ‘window:loaded’ } An object containing two properties, init and play. Init is the when event observers are attached. Play is when the SlideShow will attempt to automatically start playing if autoPlay is set. By default, these settings will allow for a SlideShow that is part of the original document to run. If a SlideShow is created after the original document is loaded, as is often the case with AJAX, custom events may be used to start a slideshow.
beforeStart Function Prototype.emptyFunction Allows for a function to be executed prior to the initial playback.
afterFinish Function Prototype.emptyFunction Allows for a function to be executed after a loop as completed.

Custom Events

The SlideShow class exposes when certain things happen internally by firing custom events. The custom events are named to be unique to each SlideShow and are based off of the root element id. So with an id of ‘myslideshow’, an example event name would be ‘SlideShow_myslideshow:started’.

SlideShow Custom Event Name Description Event Memo
‘SlideShow_’ + id + ‘:initializing’ Fired when the class begins initializing. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:initialized’ Fired when the class is done initializing. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:prepped’ Fired when the SlideShow has prepped the DOM with any styling. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:started’ Fired when the SlideShow starts playing. This occurs at the beginning and after playback resumes after being paused. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:paused’ Fired when the SlideShow is paused. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:looped’ Fired when the SlideShow has looped at the end of a sequence. Contains a reference to the SlideShow instance.
‘SlideShow_’ + id + ‘:transitioned’ Fired when a slide has finished appearing from a transition. Contains a reference to the SlideShow instance, the slide that faded, the slide that appeared, and the current loopCount.
‘SlideShow_’ + id + ‘:removed’ Fired when a SlideShow class is removed. Contains a reference to the SlideShow instance.