Creating a Slideshow

view movie Click icon to view demonstration

In this demonstration I would like to show you how to create a slideshow. A slideshow is similar, yet different than a random image. In a slideshow the image will change automatically if you do nothing. In this case the script has a timer that changes the image every 10 seconds. If the visitor want to see images more quickly they can click on Next slide or Previous slide.

Please Note - I start this demonstration with the code from a Web site and then modify it to display my images and to validate by today's standards. You will want to watch the video and read over the changes that were made. Then you can copy the clean code that validates by selecting the link to slideshow sample code.

The other significant difference is that there is a specific order to the images, based on the names of the images. In the random image script you had a 1 in 7 chance of seeing a specific image each time the page loads. With a slideshow the designer controls the order that the images display based on their names.

Now lets look at the file and folder structure and then we will examine the code. I have created a folder named "slideshow", within that folder I have an html file named "slideshow.html" and a sub folder named "yard-slides". The images inside this folder are exactly the same images as I used in the "yard"random" example.

I visited the Web site dev X and found a slideshow script created by Boris Feldman. This resource can be found at
http://www.inquiry.com/techtips/js_pro/10min/10min1199/10min1199.asp

Again, my heartfelt thanks to the author, Boris Feldman.

I access the link for the sample code, and see that this code was also written under old HTML standards.

I copied the script tag, the body tag, the image tag and 2 input tags. All of this code was originally displayed in uppercase, so I needed to convert it to lowercase so it will validate.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml ns="http://www.w3.org/1999/xhtml">
<head>
<title>Slideshow Sampler</title>

<script type="text/javascript" language="JavaScript">
<!--
// test the browser to make sure it's ok
vary browser Name = navigator.appName;
var browserVer = parseInt(navigator.appVersion);
var browserOK = (((browserName == "Netscape") && (browserVer >= 3)) ||
((browserName == "Microsoft Internet Explorer") && (browserVer >= 4)));

// URLs of images in slide show
var slideURL = Array("yard-slides/photo1.jpg", "yard-slides/photo2.jpg",
"yard-slides/photo3.jpg", "yard-slides/photo4.jpg", "yard-slides/photo5.jpg",
"yard-slides/photo6.jpg", "yard-slides/photo7.jpg");
// delay between slides (in milliseconds)
var slideDelay = 10000;
// Index of the current slide
var curSlide = -1;
// timeout id for the current setTimeout command
var curTimeout;

function showSlide() {
if (browserOK) {
// alert(slideURL.length);
curSlide = ((curSlide + 1) % slideURL.length);
// alert(curSlide);
document.images["slideImg"].src = slideURL[curSlide];
curTimeout = setTimeout("showSlide()", slideDelay);
} else {
// show an error message for older browsers
alert("This page requires Netscape 3.0+ or IE 4.0+");
}
}

function goNext() {
if (browserOK) {
clearTimeout(curTimeout);
showSlide();
}
}

function goPrev() {
if (browserOK) {
clearTimeout(curTimeout);
curSlide = (((curSlide - 2) + slideURL.length) % slideURL.length);
showSlide();
}
}
// -->
</script>

</head>
<body onLoad="showSlide()">
<h1>use my slideshow</h1>
<p>

<img name="slideImg" src="">

</p>

<input type="button" value="Previous Slide" onClick="goPrev()">
<input type="button" value="Next Slide" onClick="goNext()">

</body>
</html>

I made some modifications to the Javascript code. This code reflects the path to my images, you may need to change these values to reflect the images you use.

var slideURL = Array("yard-slides/photo1.jpg", "yard-slides/photo2.jpg",
"yard-slides/photo3.jpg", "yard-slides/photo4.jpg", "yard-slides/photo5.jpg",
"yard-slides/photo6.jpg", "yard-slides/photo7.jpg");

This code is fairly picky so make sure that you begin with a " then list the folder and file name, next enter the ending " then a comma and finally a space. Repeat this pattern for as many images as you want to use. if you accidentally forget a ", or space the Javascript will break.

Once again I recommend that you place your images in a folder instead of mixing them with the web page. I used the folder "yard-slides" and that information is entered in the URL value.

One important detail, the images will display in the order listed in this array.

I open the file and view it in the browser, my first image appears. As I wait for the next slide to automatically load, it feels a bit long to me. i see that the next and previous buttons work.

I access the variable "slidedelay" and change the value from 10000 milliseconds to 5000.

the code is changed from

var slideDelay = 10000;

to

var slideDelay = 5000;;

Now let's validate the page. I am using the Firefox Web Developers Toolbar and select Validate Local HTML. The validator reports 16 errors. That may sound bad, but it can probably be fixed fairly easily.

The first 2 errors involve JavaScript which I will not change. Next I see an error which identifies the "name" attribute as an invalid attribute. In the old days we used this attribute, it has since been revised to the CSS property of "id. I change this code

<img name="slideImg" src="">

to this

<img id="slideImg" src="">

The next errors complain about the fact that there is no "alt" tag and no ending tag, so I add this code.

<img id="slideImg" src="" alt="yard photos" />

Next I see an error that complains that the input tags are not within a block element. I decide to cure this by placing the content of the entire page within div tags.

The ending tags for the input buttons is missing, again in the old days you didn't need end tags.

<input type="button" value="Previous Slide" onClick="goPrev()" />
<input type="button" value="Next Slide" onClick="goNext()" />

I see numerous errors about ending body and html tags, but I think they are false errors that will disappear once I validate again. After running the validaotr again I see 3 errors which are all related to Javascript and can't be removed. I think this code is "good to go".

A page with the clean code can be found here - slideshow sample code.

You may be wondering why I didn't just give this to you right away, without making you see how to clean up the validator errors. I wanted you to see the code changes because I hope that after the class is over you will continue to use the Web as a resource for Web features. You may find a piece of code that does what you want, but does not validate, so being able to change the code can come in very handy.