One common use of web pages is to display images, with one image per page. Normally the page doesn’t change except for the image. JavaScript can help speed things up, by not reloading anything except for the new image.
From the resources.zip archive, open “gallery.html” in your browser. Verify that it works by following the links to the images. Clicking on each link should open just that image in your browser. If it doesn’t work in standard HTML, it won’t work after you add JavaScript to the mix.
- Block that click
- Once you’re satisfied that the links work, add a script tag to the <head> of gallery.html.
- Switch on click
- If you look in the HTML, you’ll see that the <img> tag has an ID of “frame”. When we call the switchImage function, we want to find the element with that ID in the document.
- An image gallery: Captions
- We now have a fully working photo gallery. What can we do to improve it? Photos often have captions, and each of the <a> tags linking to our photos has a title attribute whose text would make a perfect caption. So far, we’ve only modified the attributes of HTML tags. But once we get ahold of a tag’s object, we can even modify the text that the tag surrounds. If there’s a paragraph on the page and we want to change the text of that…
- Random image
- Currently, the photo gallery only acts in response to visitor activity. That is almost always the best way to start, and often the best way to stop as well. Let the visitor have control over what happens in their browser. With a photo gallery, however, a slide show might be useful. What would we need in order to make this gallery into a slide show?
- Random starting image
- Finally, let’s have it choose a random image every time a visitor visits the page. Add this to the end of gallery.js:
- Prepare a slide show
- What we’re really working towards is an automatic slide show, one that can advance through all of the images in the gallery automatically.
- An endless slide show
- Calling gallery.advance() advances to the next slide—until it reaches the last slide. Then all it does is create an error in your error console. That’s because gallery.currentSlide has gone off the end of the list of A elements. It’s trying to get the seventh, eighth, and so on element out of a list of six elements. This is easily fixed: after incrementing currentSlide, check to see if it’s longer than the list:
- Start the slide show
- Now we have an object that keeps track of the slides and can advance through them. We need a function to get up that object (to do the “gallery=new SlideShow()” for us) and a function to regularly advance through the slides.
- Wait for idle time
- The slide show is set to advance every six seconds, but we also have links along the bottom that let the visitor choose which slide they want to view. If they choose a slide during the slide show, chances are they’re only going to be able to look at it for a few seconds. Let’s make the show pause for about thirty seconds every time the visitor makes a choice.
- Current version
- Just to make sure we’re all on the same page, here’s the current version of the SlideShow object and related functions:
- An image gallery: Animation
- That’s how to use timers for long periods of time, but we can also set timers to extremely short periods of time, on the order of just a few milliseconds. This is useful for animation effects. Timers combined with style changes can make very appealing animations. For example, there is a style called “opacity” that sets the transparency of an element. We can use this to fade out one image and then fade in the next.
- An image gallery: Fade out
- Create a fade function. This function will fade out until the opacity is zero, and then advance the slide. It will return true or false depending on whether the fade is done or not.
- An image gallery: Fade in
- Of course, we also want the next image to fade in. To do this, we need to keep track of which direction the fade is going. Add a new property above the fade method, “fadeDirection”, and set it to “out”. By default, we’ll be fading out. Once we finish fading out we’ll set that property to “in”. And once we finish fading in we’ll set it to “out” again.
- An image gallery: Idle
- We’ve lost the idle timer in this version, because we’re not using the idle method.
- Always advance
- Currently, if the visitor revisits a slide during the slide show, the slide will pause, but it won’t reset itself. If the last slide it displayed was Lochmaben Castle and the visitor clicks on Ancient Sarcophagi, then after thirty seconds the slide show will resume at Lochnaw. This makes sense; there’s no reason to revisit slides we’ve already seen just because we wanted to revisit one of the slides.
- A new random image
- One of the nice things about using classes is that the shared information on the object makes it easier to add new functionality. Suppose we want to be able to display a random image, as we did earlier with a function? In the SlideShow class, it becomes a two-line function:
- Extra credit
- If you’re following this directly from the handout, the answers (or possible answers) are revealed directly beneath the questions. So if you want to try it yourself, don’t read too quickly.
