Slideshow Base

The Slideshow base script easily converts html content into a slideshow. This slideshow is used as the base for the animated slideshow which supports animated transitions between the slides. It supports any html element so the slides can be divs, imgs, or any other html element you want. It supports a user actions including:

  • Automatic recognition of play and pause buttons
  • Automatic recognition of buttons to change to an individual slide
  • Event notification for custom scripting on a variety of events

The slideshow was developed for use on GeniusRocket.com website.

Requirements

The slideshow script uses the YUI3 library (node, widget, and event). For the most part you don’t have to worry about that as the below code will load the needed modules and scripts.
<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript">
YUI({
modules: {
'gallery-slideshow-base': {
fullpath: 'FULL_PATH_TO/gallery-slideshow-base-min.js',
requires: ['node', 'event', 'widget']
}
}
}).use("gallery-slideshow-base", function(Y) {
// Code to run the slideshow goes here
Y.Slideshow.auto();

});
</script>
For now you’ll have to download the slideshow script and host it on your server, but hopefully soon they will be included on Yahoo’s CDN to make this even easier.

How to Use

The simplest way to use this script is to use the Y.Slideshow.auto(); method. It will look for any element in your document with a css class of “slideshow”, then within that element it will look for any html elements with the class of “slide” that will become the actual slides. It’s probably the easiest to understand by looking at the examples.

You can also pass a config option to the auto method specifying the:

Examples

You can view an example of the slideshow here

Advanced Usage

If you need more control than what the auto method gives there are a few ways you can instantiate the slideshows.

Fully Manual

This method gives you the most control, as you can specify a specific element to apply the slideshow to and pass in any of the configuration options, the only required option is the ‘contentBox’ for where the slideshow should be applied. There are many other options you can pass to the configuration including the animation methods, for a complete list view the configuration section.

var manual_slideshow = new Y.Slideshow({contentBox: '#manual_slideshow'});

Configuration Options

The slideshow is configured through the use of a config object.

Configuration Object Attributes

Name Type Default Value Description
activate_play_pause_buttons boolean true Should the slideshow look for and activate the play and pause buttons.
activate_next_prev_buttons boolean true Should the slideshow look for and activate the next and prev buttons.
activate_slide_buttons boolean true Should the slideshow look for buttons to select the individual slides.
auto_advance boolean true If true the slideshow will automatically advance the slides after the duration has passed. If false the slideshow will be stopped when it’s initiated so the user will have to take an action to advace the slide.
contentBox node REQUIRED The node that will be converted to a slideshow. If using the auto method this will be determined by selecting elements with the ‘slideshow’ class.
current_slide int 0 If not specified the show will look for a slide with the CSS class ‘current’ otherwise it will take the first slide.
next_button node null The node that when clicked will advance the slide one. If this is null and ‘activate_next_prev_buttons’ is true then the slideshow will look for any items within the slideshow element with the class ‘next’
pause_button node null The node that when clicked will stop the slideshow. If this is null and ‘activate_play_pause_buttons’ is true then the slideshow will look for any items within the slideshow element with the class ‘pause’
pause_time int 5 The number of seconds a slide should be displayed.
play_button node null The node that when clicked will start the slideshow. If this is null and ‘activate_play_pause_buttons’ is true then the slideshow will look for any items within the slideshow element with the class ‘play’
prev_button node null The node that when clicked will show the previous slide. If this is null and ‘activate_next_prev_buttons’ is true then the slideshow will look for any items within the slideshow element with the class ‘previous’.
slide_buttons nodeList null The buttons for linking to individual slides. If this is null and ‘activate_slide_buttons’ is true then the slideshow will look for any element within the slideshow with the css class of ‘slideSelector’.
slides nodeList null The elements that are the slides in the slideshow. If this is null then the slideshow will find any that elements within it that have the css class of ‘slide’.

Methods

advance

This function advances the slideshow to the next slide.

Parameters:

  • none

Returns: none
  

auto (class method)

This will search the page for the ‘slideshow’ CSS class and then convert those elements into slideshows.

Parameters:

  • attrs - (config object) Configuration object to customize the slideshow.
Returns: none
 

previous

Displays the previos slide, or the last slide if the slideshow is currently on the first slide.

Parameters:

  • none
Returns: none
 

render

This actually sets the display for the slideshow. If you manually instantiate the slideshow you will then want to call this method to actually start the show.

Parameters:

  • none
Returns: nothing
 

run

This method starts the slideshow so it runs automatically advancing the slides after they’ve been displayed for the set duration.

Parameters:

  • none
Returns: none
 

show_slide

This method shows a specific slide and stops the slideshow.

Parameters:

  • slide_number - (int) The slide number that should be displayed.
Returns: none
 

stop

This method stops the slideshow so it doesn’t continue advancing the slides automatically.

Parameters:

  • none
Returns: none
 

Events

Events fired by the slideshow contain:

  • slide - (slide) The slide that this event pertains to
  • slide_number - (int) The number of the slide that this event pertains to

slideshow:before-slide-displayed

Fired before a slide is displayed. The slide and slide_number are the slide about to be displayed.

slideshow:before-slide-hidden

Fired before a slide is hidden. The slide and slide_number are the slide about to be hidden.

slideshow:pause-clicked

Fired when the user pauses the slideshow. The slide and slide_number are the slide that is currently displayed.

slideshow:play-clicked

Fired when the user clicks the play button. The slide and slide_number are the slide that is currently displayed.

slideshow:slide-displayed

Fired after a slide is displayed. The slide and slide_number are the slide just displayed.

slideshow:slide-hidden

Fired after a slide is hidden. The slide and slide_number are the slide just hidden.

slideshow:slide-selected

Fired when a user specifically selects a to display a slide through the slide buttons or the next and previous buttons.

Download

File File Type Description
gallery-slideshow-base-min.js Javascript The Javscript file containing the slideshow base code.
gallery-slideshow-base-debug.js Javascript The non-compressed Javscript slideshow base file.

Tested On

It should work on all the A browsers supported by YUI it has been tested specifically on the following browsers:
Firefox 3.6
IE 7, 8
Safari 4

License

This code is licensed under a BSD license. You can view the license here. In essence you are free to do what you want with the code.
blog comments powered by Disqus