Slideshow Digg this entry Add this entry to del.icio.us bookmarks Add this entry to Slashdot bookmarks

Slideshow Screenshot

During the redesign of Sarah's spacedog.us site, she had the idea of placing images of us along with our counterparts as illustrated in her RocketFuel web comic. She wanted each image to slowly move across the page, matching the filmstrip-style theme of the rest of her site. I whipped up a flexible and lightweight javascript include file to handle her request, and at the risk of creating an annoyance similar to the now-dead <marquee> tag, I decided to share it here.

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:

<script type="text/javascript" src="/path/to/slideshow.js"></script>

How do I use it?

Slideshow does not require you to write any of your own javascript code. There are two ways to get your slideshow working, but both require you to add the attribute pair class="slideshow" to the tag in your markup that contains the images. One way is to include the Slideshow options within the class attribute, as follows:

<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.

Slideshow Options

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.

For your viewers who do not have javascript turned on, you may also style any image with "display: none" without breaking the slideshow for your javascript-enabled visitors. This way, you can display only the first image when the page loads, and if your viewer has a javascript-enabled browser, Slideshow will automatically display the rest of them and begin the slideshow.

.slideshow { width: 300px; height: 150px; }
.slideshow img { height: 150px; }

/* hide all images but the first one for those without javascript */
.slideshow img + img { display: none; }

Fair Warning!

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


CommentsRSS

Comments are disabled for this entry.