A JavaScript Prototype Class that takes a sequence of images or HTML elements and turns them into a Slide Show.
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');
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. |
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. |