Here’s a snippet of code I put together for my animation and interactivity class.  It’s a slideshow that uses Prototype and script.aculo.us.

View a demo

Here’s the JavaScript that appears in the header:

[code lang="javascript"]

[/code]

Some basic CSS also appears in the header to place the images in the right location on the page:

[code lang="css"]


[/code]

This basic HTML appears in the body to load the images for the slideshow. Any number of images can be added here:

[code lang="html"]

	
	
	
	
	


[/code]

This slideshow uses several Prototype and script.aculo.us functions. It uses two basic combination effects, Fade and Appear. Other functions:

$document.observe() keeps the functions from starting until the page has loaded. For instance, if the images haven’t been quite loaded and the scripts start to run, things could go wrong or nothing could happen at all.

[code lang="javascript"]
document.observe('dom:loaded', function () {
    //place scripts here
});
[/code]

$(‘element’).childElements() allows us to grab all the items nested inside of an object on the page. In this case we want to grab all the images that are in the “myslideshow” div to use in the slideshow. The items are then stored in an array which we called “slide”.

[code lang="javascript"]
slide =  $('myslideshow').childElements();
[/code]

afterFinish is used in the appear function in several places. It allows us to call a function after the current slide has faded in. In the SlideShow function notice that in the appear function for afterFinish we actually call the function itself–SlideShow refers to itself. This is what’s called a recursive function. This causes the slideshow to loop.

[code lang="javascript"]
$( slide[i] ).appear({ duration:5, afterFinish: function () { SlideShow(); } });
[/code]

• Download Slideshow Files (.zip)