I have tested this Slideshow script using IE 5, IE 5.5, IE 6, IE 7 beta 2, Firefox 1.0, Firefox 1.5, Opera 8, Opera 9, and Safari. Please let me know if there are any issues with other browsers.
To get started, download the slideshow.js file and place this in the <head> tag of your HTML page:
How do I use it?
<div class="slideshow ss-time='60'"> <img src="image1.png" alt="Image 1"> <img src="image2.png" alt="Image 2"> <img src="image3.png" alt="Image 3"> <img src="image4.png" alt="Image 4"> <img src="image5.png" alt="Image 5"> <img src="image6.png" alt="Image 6"> <img src="image7.png" alt="Image 7"> </div>
The other way is to use custom attributes, like so:
<div class="slideshow" ss-time="60"> <img src="image1.png" alt="Image 1"> <img src="image2.png" alt="Image 2"> <img src="image3.png" alt="Image 3"> <img src="image4.png" alt="Image 4"> <img src="image5.png" alt="Image 5"> <img src="image6.png" alt="Image 6"> <img src="image7.png" alt="Image 7"> </div>
Use the first method if you are compulsive like me and you want your markup to validate. However, if publishing a page with invalid markup doesn't bother you, the second method avoids the obvious and shameless abuse of the class attribute.
The following is the list of options available to you using markup to begin using Slideshow.
|Attribute Name||Description||Example Value||Default Value|
|ss-time||The time, in milliseconds, between each movement of the Slideshow. Lower values will speed up the slideshow, but will also be more CPU-intensive for the viewer.||60||40|
|ss-distance||The distance, in pixels, that the slideshow will move each time. Higher values will speed up the slideshow, but the motion will not appear as smooth.||5||1|
|ss-direction||The direction each image in the slideshow will move (up, down, left, or right).||up||left|
|ss-reverse||If present, the slideshow will reverse the order of the images. This does not need a value.||n/a||n/a|
Other Notes and Recommendations
Because the Slideshow script will position the container box absolutely, you should provide the container box (the element with class="slideshow") with both a width and a height in your stylesheet. I also recommend providing a height to each of the images in the slideshow if it moves horizontally, or a width to each image if the slideshow moves vertically. Otherwise, the Internet Explorer browser may cause problems with the image sizing.
I've briefly tested this project with items other than images (div tags, etc.), and it seemed to work. This may lead to some cool effects, but it may also lead to abuse similar to the infamous <marquee> tag. Please use your best judgment!
View the working demo or download Slideshow