A Slideshow with Captions
While a slideshow (like the one shown in Script 4.17) can be handy, it's likely to be more useful if you can also show captions that change along with the images. Scripts 14.7 (HTML), 14.8 (CSS), and 14.9 (JavaScript) show an example of such a slideshow (with pictures of our summer vacation!). In this task, we'll show you how to blend together different techniques you've seen in earlier chapters into one script.
Script 14.7. Our slideshow HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Our Summer Vacation!</title>
<link rel="Stylesheet" href="script03.css" />
<script type="text/javascript" language="Javascript" src="script03.js">
</script>
</head>
<body>
<h1>Our Summer Vacation Slideshow</h1>
<img height="240" width="320" src="images/slideImg0.jpg" alt="Our Vacation Pix"
 id="slideshow" />
<div id="imgText"> </div>
<br clear="all" />
<form action="#">
<input type="button" id="prevLink" value="« Previous" />
<input type="button" id="nextLink" value="Next »" />
</form>
</body>
</html>
|
Script 14.8. The external Cascading Style Sheet called by Script 14.7.
body {
background-color: white;
color: black;
font: 12px verdana, arial, helvetica, geneva, sans-serif;
}
h1 {
font: 24px "trebuchet ms", verdana, arial, helvetica, geneva, sans-serif;
margin-left: 100px;
}
form {
margin-left: 100px;
}
#slideshow {
padding: 0 10px 10px 10px;
float: left;
}
#imgText {
padding: 10px 0 0 10px;
float: left;
width: 200px;
height: 150px;
border-color: black;
border-width: 1px 0 0 1px;
border-style: solid;
}
|
Script 14.9. The slideshow script displays the photo and the caption.
window.onload = initAll;
var currImg = 0;
var captionText = new Array(
"Our ship, leaving Vancouver.",
"We took a helicopter ride at our first port, Juneau.",
"The helicopter took us to Mendenhall Glacier.",
"The happy (and chilly) couple, on the glacier.",
"Here's what our second stop, Ketchikan, looked like from the ship.",
"We got to cruise through Glacier Bay. It was absolutely breathtaking!",
"In Skagway, we took a train up into the mountains, all the way to the Canadian Border.",
"Looking back down at Skagway from the train.",
"On a trip this romantic, I shouldn't have been surprised by a proposal, but I was
(obviously, I said yes).",
"It's nice to go on vacation, but it's nice to be home again, too."
)
function initAll() {
document.getElementById("imgText").innerHTML = captionText[0];
document.getElementById("prevLink").onclick = processPrevious;
document.getElementById("nextLink").onclick = processNext;
}
function processPrevious() {
newSlide(-1);
}
function processNext() {
newSlide(1);
}
function newSlide(direction) {
var imgCt = captionText.length;
currImg = currImg + direction;
if (currImg < 0) {
currImg = imgCt-1;
}
if (currImg == imgCt) {
currImg = 0;
}
document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
document.getElementById("imgText").innerHTML = captionText[currImg];
}
|
To create a slideshow with captions:
1. |
document.getElementById("imgText"). innerHTML = captionText[0];
document.getElementById("prevLink"). onclick = processPrevious;
document.getElementById("nextLink"). onclick = processNext;
Our initAll() function needs to set three things: the photo caption for the first slide (in the imgText area), and the onclick handlers for the forward and back buttons, which will call the processNext() and processPrevious() functions, respectively.
| 2. |
function processPrevious() {
newSlide(-1);
}
function processNext() {
newSlide(1);
}
Yes, this really is all that these two functions dowell, mostly. We could rig up some convoluted code to know whether or not we want to go forward or backward based on which button was clicked, but instead, we'll just have two functions, both of which call newSlide(). The difference: one calls it passing a value of 1, and the other a value of -1, letting newSlide() know in which direction to move.
| 3. |
document.getElementById("slideshow").src = "images/slideImg" + currImg + ".jpg";
document.getElementById("imgText"). innerHTML = captionText[currImg];
This step changes both the image and its corresponding caption at the same time. Figure 14.6 shows the result.
|
|
