muppetgrrl
Programmer
I'm just learning javascript, and I'm trying to figure out why my slideshow's not working. I'm not getting an error, and the innerHTML commands are working fine, so I know the counter's working. What's NOT happening is that the image isn't showing up. It's showing the border, but just a blank white space. When I right-click the blank space, it shows the link to proper image, but the image isn't showing up. In addition, if I get an error on the page, the image DOES show up.
Here's a link to watch the behavior:
Here's the code:
<script language="JavaScript" type="text/javascript">
<!--//make an array of images
var imageArray = new Array("01_placederepublic","02_market","03_place_passage","04_riverpassage","05_stmartins_place","06_cafe_place","07_gardens","08_audemontfaucon","09_stmartins");
var imageCaption = new Array("Limoux's Place de la Republic","Open air market","Passage to the River Aude","A walkway to the plaza","St. Martin's Church","A cafe in the Place de Republic","A game of boules by the river","Gardens along the Aude River","Aude in Limoux, near Montfaucon")
//make a counter
var counter = 0;
//preload function
function preLoad()
{
// make an image object variable
var theImage = new Image;
//loop through array of images and preLoad each
for (var i=0; i < imageArray.length;i++)
{
theImage.src = imageArray; + ".jpg";
}
}
//function to move forward in the slideshow
function nextImage()
{
//test counter
if (counter < imageArray.length - 1)
{
//add one to counter if not to end of array
counter++;
}
else
{
//reset counter
counter = 0;
}
//show an image from the array.
var imgName = imageArray[counter] + ".jpg";
document.slide.src = imgName
document.getElementById("caption").innerHTML = imageCaption[counter]
var imgCount = counter + 1
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imageArray.length
}
//function to move back in the slideshow
function prevImage()
{
//test counter
if (counter > 0)
{
//subtract one from counter if not 0
counter--;
}
else
{
//subtract one from the length of the array
counter = imageArray.length - 1;
}
{
//show an image from the array.
var imgName = imageArray[counter] + ".jpg";
document.slide.src = imgName
var imgCount = counter + 1
document.getElementById("caption").innerHTML = imageCaption[counter]
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imageArray.length
}
}
//-->
</script>
</head>
<body onload="preLoad();">
<noscript>
This will display when JS doesn't exist.
</noscript>
<table align="center">
<tr>
<td width="500" colspan="2" height="400" align="center" valign="center">
<img src="01_placederepublic.jpg" name="slide" id="slide" alt="Click for next image">
</td>
</tr>
<tr><td height="1" width="500" bgcolor="#008080" colspan="2"></td></tr>
<tr>
<td width="250" height="25" name="imgNum" id="imgNum" align="left">Image 1 of 9</td>
<td width="250" height="25" align="right"><a href="javascript:;" onclick="prevImage();"><< Previous</a> | <a href="javascript:;" onclick="nextImage();">Next >></a></td>
</tr>
<tr>
<td name="caption" id="caption" width="500" colspan="2" height="75" class="header" valign="top">
Limoux's Place de la Republic
</td>
</tr>
<tr><td><img src="../../../images/copyright.gif" width="120" height="17" alt=""></td>
<td></td>
</tr>
</table>
Any ideas?
Here's a link to watch the behavior:
Here's the code:
<script language="JavaScript" type="text/javascript">
<!--//make an array of images
var imageArray = new Array("01_placederepublic","02_market","03_place_passage","04_riverpassage","05_stmartins_place","06_cafe_place","07_gardens","08_audemontfaucon","09_stmartins");
var imageCaption = new Array("Limoux's Place de la Republic","Open air market","Passage to the River Aude","A walkway to the plaza","St. Martin's Church","A cafe in the Place de Republic","A game of boules by the river","Gardens along the Aude River","Aude in Limoux, near Montfaucon")
//make a counter
var counter = 0;
//preload function
function preLoad()
{
// make an image object variable
var theImage = new Image;
//loop through array of images and preLoad each
for (var i=0; i < imageArray.length;i++)
{
theImage.src = imageArray; + ".jpg";
}
}
//function to move forward in the slideshow
function nextImage()
{
//test counter
if (counter < imageArray.length - 1)
{
//add one to counter if not to end of array
counter++;
}
else
{
//reset counter
counter = 0;
}
//show an image from the array.
var imgName = imageArray[counter] + ".jpg";
document.slide.src = imgName
document.getElementById("caption").innerHTML = imageCaption[counter]
var imgCount = counter + 1
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imageArray.length
}
//function to move back in the slideshow
function prevImage()
{
//test counter
if (counter > 0)
{
//subtract one from counter if not 0
counter--;
}
else
{
//subtract one from the length of the array
counter = imageArray.length - 1;
}
{
//show an image from the array.
var imgName = imageArray[counter] + ".jpg";
document.slide.src = imgName
var imgCount = counter + 1
document.getElementById("caption").innerHTML = imageCaption[counter]
document.getElementById("imgNum").innerHTML = "Image " + imgCount + " of " + imageArray.length
}
}
//-->
</script>
</head>
<body onload="preLoad();">
<noscript>
This will display when JS doesn't exist.
</noscript>
<table align="center">
<tr>
<td width="500" colspan="2" height="400" align="center" valign="center">
<img src="01_placederepublic.jpg" name="slide" id="slide" alt="Click for next image">
</td>
</tr>
<tr><td height="1" width="500" bgcolor="#008080" colspan="2"></td></tr>
<tr>
<td width="250" height="25" name="imgNum" id="imgNum" align="left">Image 1 of 9</td>
<td width="250" height="25" align="right"><a href="javascript:;" onclick="prevImage();"><< Previous</a> | <a href="javascript:;" onclick="nextImage();">Next >></a></td>
</tr>
<tr>
<td name="caption" id="caption" width="500" colspan="2" height="75" class="header" valign="top">
Limoux's Place de la Republic
</td>
</tr>
<tr><td><img src="../../../images/copyright.gif" width="120" height="17" alt=""></td>
<td></td>
</tr>
</table>
Any ideas?