Computer Science 180
Web Design
Fall 2011, Siena College
For our final lab, you will be creating a JavaScript-based slide show. Some of you may find the techniques useful for your design projects. Everyone will get a bit more experience with JavaScript.
You may work alone or in groups of 2 or 3 for this lab.
Pictures for your Slideshow
Your first task is to collect a group of at least six images you will display in your slideshow. These can be anything, but they should all be the same size (something like 640x480 is reasonable). Place these into your folder for this week's lab.
Basic Setup
Create a new HTML document called slideshow.html. It should be
an XHTML 1.0 Strict document, with an appropriate title, a comment
inside the <head> element with a description of the page and
the names of all of your group members, and an appropriate heading.
Before you continue, be sure your document validates properly.
Adding Page Elements
Next, get the basic layout of your slideshow page created.
In this example, "First picture." is the caption to be displayed when the given image is displayed. For now, just insert one of your images and an appropriate caption.
The buttons should be labeled appropriately, but need not do anything
just yet. They should be within a <form> element.
Setting up the Actions
We will now add the basics of the slideshow itself.
First, we need to tell the document about your images. Add a
<script> element in the document's <head> as a container
for your JavaScript variables and functions.
The first JavaScript we'll add to this element will define the list of file names for your images, and captions for them. Mine are defined by:
var images = [ "DSCF0070-640.jpg", "DSCF0071-640.jpg", "DSCF0072-640.jpg", "DSCF0073-640.jpg", "DSCF0074-640.jpg", "DSCF0075-640.jpg" ]; var captions = [ "First picture", "Second picture", "Third picture", "Fourth picture", "Fifth picture", "Sixth picture" ];
You would replace these file names and captions as appropriate for the images you wish to include in your slide show.
Next, augment your HTML elements that will need to change during the
slide show with id attributes to allow them to be looked up from
JavaScript functions. Also, add onclick attributes to your
buttons that will call JavaScript functions. Your "<" button should
call a function called prevPic, the "Start Slideshow" button
should call slide, and your ">" button should call
nextPic. Also, add an onload attribute to the <body>
element to call the function updatePic.
We now need to add those functions to the JavaScript. To start out, just provide empty implementations of these function (programmers call such functions stubs - they are just placeholders for testing until we fill in the details later). For example, the prevPic function should look like:
function prevPic() {
}
Once the four function stubs are in your document, try loading the document again in a browser to make sure it still looks correct. Also, make sure your page doesn't generate any errors in the browser's error console when the page loads or when you press any of the three buttons.
Implementing the Actions
The next step is to fill in the details of these functions. We start with the updatePic function. This will be used to set up the initial state of the slide show (displaying the first of your images and its caption), and later to update the state when the image is supposed to change.
In all of these cases, we will want to change the state of the slide show to include all of the information about the currently selected image. We will need a variable to keep track of that (much like the count in our "Blastoff" example earlier in the semester).
Let's call it currentPic. It should be declared and initialized to 0 outside of any function:
var currentPic = 0;
Now, inside the function updatePic, we will update several of the elements on the page to reflect the image corresponding to this variable.
Our images will be numbered from 0 to one less than the total number of images. So when we want to display the first image, currentPic will be 0.
The following will be needed:
<img> element to the file name
of the image, which is in images[currentPic].
<img> element to the caption,
which is again in captions[currentPic].
"Image " + (currentPic+1) + " of " + images.length;
Now, in the HTML, change the src= and alt= attributes of
your <img> tag to be "" and change the contents of the
element that displays the caption to be empty.
Reload your page and verify that your first image and its caption are displayed, and that the "Image X of N" element is correct.
Our next enhancement will be to write the prevPic and nextPic functions that are called when the "<" and ">" buttons are pressed to switch to the previous or next images.
These are quite simple, since they can make use of the already-working updatePic function. prevPic should contain just two lines:
currentPic = currentPic - 1; updatePic();
nextPic is similar.
Implement these two and then reload your page. Make sure your page is updated correctly when you push the "<" and ">" buttons.
There is still a problem with what we have implemented so far. There is nothing stopping the variable currentPic from becoming negative or greater than or equal to the length of our array of images. In these cases, no image or meaningful caption will be displayed.
We can fix this by making sure that no one can press the "<" button when currentPic is already 0, or the ">" button when currentPic is already equal to images.length - 1. If the "<" button has an id of backbutton, the following will disable the "<" button when currentPic is 0 and enable it otherwise:
if (currentPic == 0) {
document.getElementById("backbutton").disabled="disabled";
}
else {
document.getElementById("backbutton").disabled="";
}
Add this to your updatePic function, along with similar code to disable the ">" button when currentPic is equal to images.length - 1. Reload your page in a browser and verify that you can no longer cause the currentPic value is out of range.
Adding an Automatic Slide Show
The last piece of functionality we want to add is the automatic slide show behavior that starts when we clock the "Start Slideshow" button. We set up the button to call the function slide when clicked. In this function, we would like to start a process where the picture is changed automatically periodically, in our case, once every 2 seconds.
JavaScript provides a mechanism that will do just what we need: call a function at a specified time in the future. In the function slide, we'll add a call to the builtin JavaScript function setTimeout:
setTimeout("rotatePic()", 2000);
This call will cause JavaScript to call the function rotatePic 2 seconds (2000 milliseconds) into the future.
We then need to write the rotatePic function. It will need to do three things:
Try this out. If you press the "Start Slideshow" button, pictures should change automatically every 2 seconds. You can still use the "<" and ">" buttons to go one picture forward or back.
There is a problem here if we allow someone to press the "Start Slideshow" more than once. Multiple timers will be set and the pictures will cycle more and more quickly.
Instead, we will make sure that someone can only start the slide show once at a time. We'll do this by changing the button to a "Stop Slideshow" button while a slide show is in progress, then back to "Start Slideshow" when the show has stopped.
The first step is to remember whether a slide show is currently in progress. This will require a new variable we'll call slideShow. It will hold either true or false, indicating whether there is currently a slide show in progress or not. We will check this in the slide function to determine if we are supposed to be starting or stopping the slide show.
if (slideShow) {
slideShow = false;
// do stuff to stop a running slide show
}
else {
slideShow = true;
// do stuff to start a slide show
}
The two steps needed to start a slide show are to change the label on the button to "Stop Slideshow" and, as before, call setTimeout to schedule the first picture rotation.
To stop the slide show, we change the label on the button back to "Start Slideshow" and cancel the setTimeout so the rotation will stop.
To accomplish the cancellation of the setTimeout, we need to declare one more variable outside any function and remember the return value of each setTimeout call:
currentTimer=setTimeout("rotatePic()", 2000);
Then, when we want to stop a slide show, we can make the call:
clearTimeout(currentTimer);
We now have a functional slide show that can be operated manually with the "<" and ">" buttons, or with an automatic rotation that can be started, stopped, and restarted.
Submitting Your Work
Before 1:30 PM, Monday, December 12, 2011, submit your file for grading. There are three things you need to do to complete the submission: (i) make sure your page is uploaded properly to the class web space and are available at your URI, (ii) update your main index on the class web space to have links to the document you have created for this lab, and (iii) email a copy of your file to me at jteresco AT siena.edu. If you worked with a partner, you need only upload to the account of one of the team members, but each team member should link to the page on his or her own main index. Make sure your page validates properly as XHTML Strict.
Grading Sheet
This lab is worth 20 points, which are distributed as follows:
| > Feature | Value | Score |
| Required Components | ||
| Basic page layout | 1 | |
| List of pictures and captions | 2 | |
| Initial image and caption display | 2 | |
| "<" and ">" work | 2 | |
| "<" and ">" disabled when necessary | 2 | |
| Start a slide show | 2 | |
| Cannot start a second slide show concurrently | 2 | |
| Stop a slide show | 2 | |
| Style | ||
| XHTML document passes validation | 2 | |
| Formatting of HTML text | 1 | |
| Submission | ||
| Main index updated | 1 | |
| Email submission | 1 | |
| Total | 20 | |