Prerequisites

You'll need the Yahoo UI library, available here. You'll need to load these files: yahoo.js, dom.js, event.js, connection.js (for remote html slides) and animation.js.

You can then simply include the slideshow.js and slideshow.css files available on the download page.

Markup

Container

The container of the slideshow is a simple div with the class yui-sldshw-displayer. For some reasons, in the demonstration on the front page I had to specify inline style for the container, like this:

 <div id="yui-sldshw-displayer2" class="yui-sldshw-displayer" style="height:300px;width:350px;">

Slides

Slides defined in the page are

• for html slides:div elementss children of the container, with the class yui-sldshw-frame. The slide to be shown initially also should have the class yui-sldshw-active
• for images slides: img elements children of the container, with the class yui-sldshw-frame. The slide to be shown initially also should have the class yui-sldshw-active

Remote HTML content is put in a containing div when loaded. Remote images loaded on demand have class applied to them prior to their insertion in the DOM tree.

Javascript

The slideshow is contrusted by instanciating the class YAHOO.myowndb.slideshow. The constructor takes 2 arguments:

• the container's id
• an configuration object, with the following fields:
  • frames:an array of objects representing the remote slides to load on demand (see below for details),
  • effect: the effect to apply when transitioning to the next slide. Available effects are Available effects are YAHOO.myowndb.slideshow.effects.slideUp, YAHOO.myowndb.slideshow.effects.slideRight,YAHOO.myowndb.slideshow.effects.slideLeft, YAHOO.myowndb.slideshow.effects.squeezeLeft, YAHOO.myowndb.slideshow.effects.squeezeRight, YAHOO.myowndb.slideshow.effects.squeezeUp, YAHOO.myowndb.slideshow.effects.squeezeDown, YAHOO.myowndb.slideshow.effects.fadeOut, YAHOO.myowndb.slideshow.effects.fadeIn
  • slide_selector:function taking 2 parameters: number_of_slides and current frame index, and returns an integer being the index of the next frame. Here the code for a random slide selector:

    				function(number_of_slides, current_index)
    				{
    					return Math.floor( Math.random()*number_of_slides);
    				}                   

  • interval: interval in milliseconds between 2 transitions when loopint through slides

Remote slide objects have 3 fields:

• type: can be remote_html (for html content) or image_url
• value: the url where the remote slide can be found
• id: the id to give to the slide.

Here is how the slideshow on the homepage was defined:

slideshow2 = new YAHOO.myowndb.slideshow("yui-sldshw-displayer2",
			{ frames: [ { type: 'remote_html', value: 'http://www.madb.net/slideshow/remoteslide.html', id: "re1"}],
			  effect: YAHOO.myowndb.slideshow.effects.slideRight
			}
			);

You can start the looping by calling the loop method, like this:

slideshow2.loop()

New effects

Effects are simple objects with following fields:

• setup: a function that prepares the next slide for the transition (argument is the next frame)
• get_animation: a function taking the active element (to which the effect will apply) as argument, and returning the YAHOO.util.anim or YAHOO.util.motion instance built with that element

Here is the definition of the slideUp effect:

YAHOO.myowndb.slideshow.effects.slideUp={
			setup: function(frame){
					YAHOO.util.Dom.setStyle(frame, 'top', '0'); 
					YAHOO.util.Dom.setStyle(frame, 'left', '0'); 
			},
			get_animation: function(frame){
					region = YAHOO.util.Dom.getRegion(frame);
					return new YAHOO.util.Motion(frame, { points: { by: [0,region.top-region.bottom] } }, 1, YAHOO.util.Easing.easeOut);
			}
}
				

Changelog

0.3