Dan Fergus Design > Student Resources > Syllabus > Class Schedule > Javascript Slide Show

VCB424 Advanced Interactive Design IV

Javascript: Slide Show

In this exercise we'll use javascript to create a simple slide show that runs forward and backward.

Procedure

1. Create a new root folder for this project called slideShow.
2. You will need some pictures to use for the show. Here are some that you can use (right-click and download the source).
3. Unzip the file. Inside is an "images" folder that contains several sample slides. Place the images folder into slideShow.
4. Launch Dreamweaver and create a new document.
5. Save it as slideShow.html into the root folder.
6. Add the following code to the body of the document:

<div id="sideshow">

<h3>My Slide Show</h3>

<p><img src="images/boat1.jpg" id="myPicture" width="200" height="200" alt="Slideshow" />
</p>

<p><a href="previous.html" id="prevLink">&lt;&lt; Previous</a>&nbsp;&nbsp;<a href="next.html" id="nextLink">Next &gt;&gt;</a></p>

</div>

Obviously you are free to modify the design and add styles. However, leave the id names "myPicture," "prevLink," and "nextLink" alone—we will be referring to them with the javascript.

7. Here is the javascript; once again start with the <script: tags in the head of the document:

<script language="javascript" type="text/javascript">

 

</script>

8. Now between the <script> and </script> tags add the following javascript:

window.onload = initLinks;

var myPix = new Array("images/boat1.jpg","images/falls.jpg"," images/hoist.jpg","images/jayCook.jpg","images/marshGrass.jpg", "images/nokomis.jpg","images/pond.jpg");

var thisPic = 0;

First we execute a function called "initLinks" which we will write in the next step. Then we set up a variable called "myPix" and assign the contents of an array (which contains the names of my pictures) to it. A second variable called "thisPic" is given an initial value of zero.

9. Now add this code:

function initLinks() {
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}

This function uses the DOM to find the "previous" and "next" links in the html code and tells the browser to execute the corresponding function should either be clicked.

10. Now we write those two functions:

function processPrevious() {
if (thisPic == 0) {
thisPic = myPix.length;
}
thisPic--;
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}

 

function processNext() {
thisPic++;
if (thisPic == myPix.length) {
thisPic = 0;
}
document.getElementById("myPicture").src = myPix[thisPic];
return false;
}

11. These two functions are very similar. Both check the value of "thisPic" first to determine which image should be displayed. If the next button causes "thisPic" to exceed the number of pictures it is reset to 0 (and 1 is then added to bring it to 1); if "previous" drops the value to zero, it is reset to the length of the array. This way the images continuously cycle through (and if you add more pictures to the array, you don't have to change the code).

Finishing Touches.

1. Try it out, does it work?
2. Use your own images.
3. Try adding more pictures.
4. Add design/styles to your slideshow.
5. FTP the slide show folder to your server space.
6. Make a link to the html file from your home page.

Point Breakdown

Course Outline

Syllabus

Student Resources