Creating a Slide Show


Creating a “slide show” is simply a matter of using a timer to display a series of images. When the timer is “fired,” a new image is loaded into an HTML <IMG> object using its src property.

This example shows you how to create a slide show that displays images either in a specified order or by choosing random images from those available. Generating random numbers using the random and floor methods of the JavaScript Math object are reviewed in the sidebar “ Generating Random Numbers.” (Chapter 3, “ Using Conditional Statements,” also explained the Random method in the context of the Rock, Scissors, and Paper application.)

start sidebar
Generating Random Numbers

In the slide show example, two methods of the JavaScript Math object, Math.floor and Math.random, are used to generate a random slide pick. As you’ve already seen, random numbers are useful in many other contexts, such as interactive games.

Math.floor returns the nearest rounded-down integer to its argument.

Math.random returns a pseudorandom number between zero and one. (Pseudo because, as you may know, there’s no such thing as a method that truly generates a random number—there are only random number generators that meet various statistical tests for randomness.)

The expression used in the slide show example

 Math.floor(Math.random() * 11) 

picks a number at random between zero and 10 (corresponding to the elements of the picture array).

end sidebar

The images used for the slide show happen to be hosted on my personal Web site, http://www.bearhome.com. But you could substitute any images you like, provided they’re accessible via a Web URL or a local path.

Note

The slide show program uses the setTimeout method to provide timer functionality. Timers were explained in Chapter 8, “ Understanding Events and Event-Driven Programming.”

To Create a Slide Show:

  1. In an HTML page, create a form containing a button to start the show in sequential order, a button to start the show in random order, and a button to stop the show followed by an <IMG> element (to display the slide show):

     <H1>View a slide show of our garden today!</H1> <FORM> <TABLE cellpadding=20 cellspacing=20> <TR> <TD> <INPUT type=button value="Show in Order"     name=theButton onClick="inOrder();"> </TD> <TD> <INPUT type=button value="Random and Repeat"     name=theButton onClick="showRandom();"> </TD> <TD> <INPUT type=button value="Stop" name=theButton     onClick="clearTimeout(timeOutId);"> </TD> </TR> </TABLE> <BR> </FORM> <IMG name=slideshow     src="/books/2/230/1/html/2/http://www.bearhome.com/garden/images/gard6.jpg"     width=500 border=5> 

    When this page is loaded, it’ll display a single image as shown in Figure 11-8. The buttons include onClick event handlers that will be used to start and stop the show.

    click to expand
    Figure 11-8: The slide show page loads showing a single, static image.

  2. Load the photographs that will be displayed in the slide show into a JavaScript array:

     <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> <!-- Hide that code from very old browsers  var gardenPix = new Array  ("","http://www.bearhome.com/garden/images/gard1.jpg",  "http://www.bearhome.com/garden/images/gard2.jpg",  "http://www.bearhome.com/garden/images/gard3.jpg",  "http://www.bearhome.com/garden/images/gard4.jpg",  "http://www.bearhome.com/garden/images/gard5.jpg",  "http://www.bearhome.com/garden/images/gard6.jpg",  "http://www.bearhome.com/garden/images/gard7.jpg",  "http://www.bearhome.com/garden/images/gard8.jpg",  "http://www.bearhome.com/garden/images/gard9.jpg",  "http://www.bearhome.com/garden/images/gard10.jpg"); 

    Note that element zero of the array is set to contain an empty string rather than an image.

  3. Create a variable to store the index number of the displayed image:

     var whichPic = 1; 

  4. Create a variable to store the timeout identifier:

     var timeOutId; 

  5. Create a function, inOrder, that uses the setTimeout method to call the showPic function in index order, one picture every second, continuously looping:

     function inOrder() {     showPic(whichPic);     whichPic ++;     if (whichPic > 10)        whichPic = 1;     status = whichPic;     timeOutId=setTimeout("inOrder();",1000);  } 

    The variable timeOutId now refers to the return value of the setTimeout method, and it can be used to stop the timer from firing.

  6. Create a function, showRandom, that uses the JavaScript random number generator to call the showPic function in random order:

     function showRandom() {     whichPic = Math.floor(Math.random() * 11);     if (whichPic == 0)        whichPic = 1;     showPic(whichPic);     status = whichPic;     timeOutId=setTimeout("showRandom();",1000);  } 

    Note that because there’s no image stored in the zero element of the array, if the random generator returns zero, it’s replaced with the value 1. This is done to make sure that the random generator is used to pick a slide between one and 10.

  7. Create the showPic function, which actually displays a single image by assigning the array element with the value passed to the function to the src attribute of the image control:

     function showPic(i) {     document.images[0].src=gardenPix[i];  } 

    Note that the image element is referred to as the first (zero element) of the images array associated with the loaded document object.

  8. Save the HTML page (Listing 11-3 shows the complete source code).

    Listing 11.3: Creating a Slide Show Using a Random Number Generator

    start example
     <HTML> <HEAD> <TITLE>Slide Show</TITLE> </HEAD> <BODY bgcolor=black text=white> <SCRIPT>  var gardenPix = new Array  ("","http://www.bearhome.com/garden/images/gard1.jpg",  "http://www.bearhome.com/garden/images/gard2.jpg",  "http://www.bearhome.com/garden/images/gard3.jpg",  "http://www.bearhome.com/garden/images/gard4.jpg",  "http://www.bearhome.com/garden/images/gard5.jpg",  "http://www.bearhome.com/garden/images/gard6.jpg",  "http://www.bearhome.com/garden/images/gard7.jpg",  "http://www.bearhome.com/garden/images/gard8.jpg",  "http://www.bearhome.com/garden/images/gard9.jpg",  "http://www.bearhome.com/garden/images/gard10.jpg");  var whichPic = 1;  var timeOutId;  function inOrder() {     showPic(whichPic);     whichPic ++;     if (whichPic > 10)        whichPic = 1;     status = whichPic;     timeOutId=setTimeout("inOrder();",1000);  }  function showRandom() {     whichPic = Math.floor(Math.random() * 11);     if (whichPic == 0)        whichPic = 1;     showPic(whichPic);     status = whichPic;     timeOutId=setTimeout("showRandom();",1000);  }  function showPic(i) {     document.images[0].src=gardenPix[i];  }  // End code hiding from ancient browsers --> </SCRIPT> <H1>View a slide show of our garden today!</H1> <FORM> <TABLE cellpadding=20 cellspacing=2 0> <TR> <TD> <INPUT type=button value="Show in Order" name=theButton  onClick="inOrder();"> </TD> <TD> <INPUT type=button value="Random and Repeat"  name=theButton onClick="showRandom();"> </TD> <TD> <INPUT type=button value="Stop" name=theButton  onClick="clearTimeout(timeOutId);"> </TD> </TR> </TABLE> <BR> </FORM> <IMG name=slideshow src="/books/2/230/1/html/2/http://www.bearhome.com/garden/images/gard6.jpg"     width=500 border=5> </BODY> </HTML> 
    end example

  9. Open the page in a browser (Figure 11-8).

  10. Click Show in Order or Random and Repeat to start the slide show (see Figure 11-9).

    click to expand
    Figure 11-9: The slide show displays images in index order or at random; in either case, the index value of the image is displayed on the status bar.

Note

You can use the slide show technique to create animations that use graphics rather than photographs.

Tip

The example shows the index number of the currently displayed image in the status bar so you can see what’s going on “under the hood” better. For example, the image shown in Figure 11-9 is the sixth image in the image array.




Learn How to Program Using Any Web Browser
Learn How to Program Using Any Web Browser
ISBN: 1590591135
EAN: 2147483647
Year: 2006
Pages: 115
Authors: Harold Davis

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net