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
• How to Use
• Examples
• Advanced Usage
• Configuration
• Download
• Tested On

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

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

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