JavaScript Slideshow Help [Archive]

AlyssaJ

01-23-2009, 09:32 PM

I'm trying to create a JavaScript slideshow that is based on the slideshow in this Web site:

http://www.javascriptworld.com/chap14-3.html

It consists of the HTML page, which creates the slideshow interface:

<!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 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>

The external CSS file:

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;
}

The JavaScript file:

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];
}

In the above link that contains the entire activity, several pictures are also listed (slideImg0.jpg, slideImg1.jpg, slideImg2.jpg, etc.). Although the activity shows how the captions for each slide are incorporated into the code, it doesn't show how all of the images are incorporated.

Could someone show me how I would write the code for the images and captions (so that a working slideshow appears in my Web site) in the JavaScript and the HTML pages? Also, could you give me an example with two of the images (or captions, if necessary), so I'll know how to write all of the images (or captions, if necessary) consecutively?

In the JavaScript file, would I write the code like this:

document.getElementById("slideshow").src = "images/slideImg0" + currImg + ".jpg";
document.getElementById("slideshow").src = "images/slideImg1" + currImg + ".jpg";

Thanks in advance! :)

auslin

01-24-2009, 10:59 PM

The code all works fine as is. There is no need for you to add any more javascript to handle any of the images. That 3rd last line in the javascript file (automatically) assembles the source name of the next image to be viewed each time through. There is no need to do any manual addition to the javascript or HTML here.

Just do a final check that everything is correctly named and accessible. For this example:

1. That there are 10 images, named: slideImg0.jpg, slideImg1.jpg, slideImg2.jpg, ... etc ... slideImg9.jpg. These 10 images match the 10 captions provided in the captionText array.

2. That these 10 images are in a subdirectory called "images"; being a subdirectory off the current directory containing the HTML file (and also the CSS file and the javascript file).

If it does not work, it is likely that the images are in another location to that described in '2.'