Home » ClientCore: Pages in browsers » A Web page with images

Project: Making a slideshow

See more about:
Table of Contents
  1. Where are we?
  2. This page’s goals
  3. Slide show behavior
  4. Tracking program execution
  5. Enhance the slide show
    1. Show the slide number
    2. Add a back button
    3. Making a function
    4. Adding image descriptions
  6. Summary
  7. What now?

Where are we?

You learned how to show and hide an image. You saw the if statement in action. Now let’s make a simple slide show.

This page’s goals

By the end of this page, you should:

  • Know how to control a sequence of events.
  • Know how to restart an event sequence when it gets to the end.

Slide show behavior

Let’s make sure we know what we want from the slide show.

Please try the page. Click on the arrow a few times. Notice that there are four photos. The show cycles back to the first one when it’s done.

The page is showing one image, cycling it as the user clicks.

Image cycle

Figure 1. Image cycle

We’ll actually use only one <img> tag. By changing its src attribute, we’ll change which photo the <img> tag is showing.

Suppose we gave each photo a number. This is what would be happening.

Numbered image cycle

Figure 2. Numbered image cycle

The slide number starts at 1. On each click, it goes up by one. When it gets to 4, a click sends it back to one. Each event is a step in the cycle. Click – 1 – click – 2 – click – 3 – click – 4 – click – 1 – click – 2 – ...

Let’s move closer to the actual code. Suppose we name the image files slide1.jpg, slide2.jpg, slide3.jpg, and slide4.jpg. The name of the image for the current slide would be:

slide + the slide number + .jpg

If we could put that into the src attribute of the <img> tag, it would show the current slide.

Closer to code

Figure 3. Closer to code

Here’s some pseudocode for the click() event:

Increase the slide number by one.
The new slide name is slide + slide number + .jpg.
Set the <img> tag's src to the slide name.

Wait a minute. I forgot something. There is no slide 5. Hmm. How about this?

Increase the slide number by one.
If the slide number is more than 4, make it 1.
The new slide name is slide + slide number + .jpg.
Set the <img> tag's src to the slide name.

That’s better.

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Slide Show</title>
    <style type="text/css">
      #forward {
        cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var slide_number = 1;
        $("#slide").attr("src", "slide" + slide_number + ".jpg");
        $("#forward").click(function() {
          slide_number ++;
          if ( slide_number > 4 ) {
            slide_number = 1;
          }
          $("#slide").attr("src", "slide" + slide_number + ".jpg");
        });
      });
    </script>
  </head>
  <body>
    <h1>Slide Show</h1>
    <p><img id="slide" alt="Slide show image"></p>
    <p><img id="forward" src="forward_arrow.gif" alt="Forward"></p>
  </body>
</html>

Figure 4. The code!

Let’s look at the HTML first. Line 28 is the <img> that shows a photo. Notice that the <img> tag has id and alt attributes. The id will let us mess with the image in JavaScript. The alt is needed for the page to validate.

But there’s no src attribute in line 28. That’s because the src in set in JavaScript. Its value changes with each click.

Line 29 is the thing that users’ click on. I found the image in a clip art library I bought. The <img> tag in line 29 also has an id, because I want to attach an event to it.

The CSS for this image is in lines 7 to 9. #forward means “Find the thing with an id of forward.” The style sets the mouse cursor to the pointer, which by default looks like a hand.

Now for the JavaScript. Line 14 creates the variable slide_number, and sets its initial value to 1. This variable will go up by one every time the user clicks on the arrow.

Line 15 is:

$("#slide").attr("src", "slide" + slide_number + ".jpg");

$("#slide") says “Find everything with an id of slide.” There is only one thing with that id. Again, don’t forget the #.

"slide" + slide_number + ".jpg" computes the name of the file to show in the <img>. If slide_number is 1, then this works out to slide1.jpg. If If slide_number is 4, then this works out to slide4.jpg.

The attr() function sets an attribute of a tag. There are lots of different attributes, so you need to tell attr() which one to set. Then you give it the value.

In English, this:

$("#slide").attr("src", "slide" + slide_number + ".jpg");

says:

Find the thing with an id of slide. Set its src attribute to the value "slide" + slide_number + ".jpg".

Line 16 binds code to the click() event of the forward arrow. So the code from lines 17 to 21 is run whenever the user clicks on the arrow.

Line 17 adds one to the variable slide_number. That’s what ++ does – add one to a variable. You could also write:

slide_number = slide_number + 1;

That says “Take the value of the variable slide_number, add 1 to it, and put the result into the variable slide_number.” It’s common for variables to overwrite their own values like this.

What happens when the user gets to the last slide (slide 4), and clicks on the forward image? There are no more slides! So, back to slide 1. Here’s the if statement:

if ( slide_number > 4 ) {
  slide_number = 1;
}

When slide_number > 4 is true, run the code in the braces. This sets slide_number back to 1.

Finally, line 21 changes the src attribute of the <img> tag, to show the right slide. It’s the same code as line 15.

W00f!

Tracking program execution

I’ll change the JS to this:

$(document).ready(function() {
var slide_number = 1;
$("#slide").attr("src", "slide" + slide_number + ".jpg");
$("#forward").click(function() {
  slide_number ++;
  alert("slide_number before if: " + slide_number);
  if ( slide_number > 4 ) {
    slide_number = 1;
  }
  alert("slide_number after if: " + slide_number);
  $("#slide").attr("src", "slide" + slide_number + ".jpg");
  alert("Slide file name: " + "slide" + slide_number + ".jpg")
});

Figure 5. alert()

Please try it. Notice how The alert() statements show how the program is working.

This is especially handy if there’s a bug in the program. It helps you understand what the program is doing. You can compare what you see to what you expect to see. For example, if you expect slide_number to change from 5 to 1, and it doesn’t, that’s a clue that there might be something wrong with the if.

Exercise: A slideshow

Create your own slide show of at least eight images.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Enhance the slide show

Let’s make some improvements.

Show the slide number

First, let’s show the slide number. Try my solution.

I added this to the HTML, creating a place to show the slide number:

<p>Slide number <span id="slide_number"></span>.</p>

Recall that <span> creates a spot on the page you can refer to with its id.

The I added this to the JavaScript:

$("#slide_number").text(slide_number);

I added it twice, after lines 15 and 21 of Figure 4.

Add a back button

Next I added a button to go backward in the slide show. You can try the page.

Here’s the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Slide Show</title>
    <style type="text/css">
      #forward, #backward {
        cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var slide_number = 1;
        $("#slide").attr("src", "slide" + slide_number + ".jpg");
        $("#slide_number").text(slide_number);
        $("#forward").click(function() {
          slide_number ++;
          if ( slide_number > 4 ) {
            slide_number = 1;
          }
          $("#slide").attr("src", "slide" + slide_number + ".jpg");
          $("#slide_number").text(slide_number);
        });
        $("#backward").click(function() {
          slide_number --;
          if ( slide_number < 1 ) {
            slide_number = 4;
          }
          $("#slide").attr("src", "slide" + slide_number + ".jpg");
          $("#slide_number").text(slide_number);
        });
      });
    </script>
  </head>
  <body>
    <h1>Slide Show</h1>
    <p><img id="slide" alt="Slide show image"></p>
    <p>Slide number <span id="slide_number"></span>.</p>
    <p>
      <img id="backward" src="backward_arrow.gif" alt="Backward">
      <img id="forward" src="forward_arrow.gif" alt="Forward">
    </p>
  </body>
</html>

Figure 6. Going backward

Look at line 7. This tells the browser to apply the same CSS rule to two different things. Don’t forget the ,.

Line 26 shows the — operator. It subtracts 1 from a variable.

Lines 27 and 28 make sure that slide_number does not go below 1.

Exercise: Improve your slideshow

Improve the slide show you made. Add:

  • Slide number.
  • Back button.
  • Home button. It always takes you back to the first slide.

Add JavaScript alert() statements so that you can see how the program works.

Upload your solution to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Making a function

Web sites are always changing. Webers know this, and design sites so they’re easy (and therefore cheap) to change. A WEb site is maintainable if it’s easy to change.

One easy way to improve maintainability is to reduce duplicate code. In Figure 6, lines 15 and 16 are the same, lines 22 and 23 are the same, and lines 30 and 31 are the same. That’s because the program is changing the photo three times: once during initialization, once on page forward, and once on page back.

What if we need to change what the photo display code does? Maybe we want to add, say, a description to each photo (which we’ll do soon). We’d have to change the code in three places. The chances for error go up, and the longer it’s going to take to make everything work.

I’m going to put the repeated code into its own function. A function is a piece of code with a name. We’ve already used functions, like toggle() and text(). Those functions are part of jQuery. But we can make our own as well.

Here’s the new JavaScript.

$(document).ready(function() {
var slide_number = 1;
show_slide(slide_number);
$("#forward").click(function() {
  slide_number ++;
  if ( slide_number > 4 ) {
    slide_number = 1;
  }
  show_slide(slide_number);
});
$("#backward").click(function() {
  slide_number --;
  if ( slide_number < 1 ) {
    slide_number = 4;
  }
  show_slide(slide_number);
});
});

//Show the slide with the number given.
function show_slide(slide) {
  $("#slide").attr("src", "slide" + slide + ".jpg");
  $("#slide_number").text(slide);
}

Figure 7. Adding a function

The function in lines 33 to 36 is called show_slide(). It takes one parameter, the number of the slide to show. A parameter is a value that goes into the function. The function uses the parameter to do its work.

The function is called on lines 15, 21, and 28. Note that there is no relationship between the name of the parameter in the function (slide) and the name of the variable that is passed in (slide_number). I could change slide to hippos_are_very_large in show_slide(). As long as I changed it in the entire function, it would still work.

If I want to change how slides are shown everywhere in the program, I make the change in one place: show_slide(). The function calls – lines 15, 21, and 28 – don’t say how to show a slide. They just say, “Show it!” The function does the work.

You can try the page. It will act exactly the same as the previous version. Users won’t notice any difference.

But when it comes time to change the page, you’ll be able to do it faster and more accurately.

Adding image descriptions

Let’s add a description to each image, so that the user knows what s/he is looking at. Please try the page.

Here’s the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Slide Show</title>
    <style type="text/css">
      #forward, #backward {
        cursor: pointer;
      }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var slide_number = 1;
        show_slide(slide_number);
        $("#forward").click(function() {
          slide_number ++;
          if ( slide_number > 4 ) {
            slide_number = 1;
          }
          show_slide(slide_number);
        });
        $("#backward").click(function() {
          slide_number --;
          if ( slide_number < 1 ) {
            slide_number = 4;
          }
          show_slide(slide_number);
        });
      });
      
      //Show the slide with the number given.
      function show_slide(slide) {
        $("#slide").attr("src", "slide" + slide + ".jpg");
        $("#slide_number").text(slide);
        if ( slide == 1 ) {
          $("#description").text("Renata as a puppy, chewing on a human's feet.");
        } else if ( slide == 2 ) {
          $("#description").text("Renata wondering what is going on.");
        } else if ( slide == 3 ) {
          $("#description").text("Renata loves to chase balls.");
        } else if ( slide == 4 ) {
          $("#description").text("What's that? Can I eat it?");
        }
      }
    </script>
  </head>
  <body>
    <h1>Slide Show</h1>
    <p><img id="slide" alt="Slide show image"></p>
    <p>
      Slide number <span id="slide_number"></span>.
      <span id="description"></span>
    </p>
    <p>
      <img id="backward" src="backward_arrow.gif" alt="Backward">
      <img id="forward" src="forward_arrow.gif" alt="Forward">
    </p>
  </body>
</html>

Figure 8. Showing a description

Line 53 is where the description goes. The <span> is an in-line tag, so the browser shows the description as part of the same paragraph as the slide number.

Lines 36 to 44 show a different use of the if statement. Do this, or that, or that, depending on the value of slide.

Because I used a function, I only had to add the description code in one place. If I hadn’t used the function, I would have had to add the code in three places.

Let’s w00f for functions! W00f! W00f! W00fy w00f w00f!

Summary

On this page, you learned how to control a sequence using events, with a variable keeping track of where the page is in the sequence.

You also learned about functions. They make your Web pages more maintainable.

What now?

Now it’s time to do some more exercises. Yay! Remember to ask your study group for help if you need it.


Lessons

User login


Dogs