Forum Moderators: open
<script type="text/javascript">
/* <![CDATA[ */
var pots = [
{
"title":"Image of the sample pan",
"path":"images/small.jpg" },
{
"title":"Small Pan front view",
"path":"images/front.jpg" },
{
"title":"Optional glass lid.",
"path":"images/glasslid.jpg"},
{
"title":"Side elevation",
"path":"images/side.jpg"}
{
"title":"Optional glass lid.",
"path":"images/glasslid.jpg"},
{
"title":"With standard lid",
"path":"images/withlid.jpg"},
{
"title":"Copper version",
"path":"images/copperfry.jpg"},
{
"title":"Green version",
"path":"images/greenfry.jpg"},
];
var pos = 0;
function switchImage() {
if (pos>=pots.length)
pos=0;
else if(pos<0)
pos=pots.length-1;
document.images[0].src=pots[pos]["path"];
}
</script>
</head>
<body onload="javascript:document.getElementById('title').innerHTML=pots[pos]['title'];">
<div id="header">Content</div>
<div id="left">Content</div>
<div id="middle">
<div id="slideshow">
<h2>The 20 inch silver frying pan.</h2>
<p><img src="images/small.jpg" alt="small pan image" /></p>
<p id="title">Small Pan Image</p>
<p class="center">
<a href="javascript:pos--;switchImage();">back</a> <a href="javascript:pos++;switchImage();">next</a></p>
</div>
</div>
</code>
The code shows the first image, but not any of the other when I press next. I may have inserted things into the wrong place. Can anyone help please?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>astupidtitle</title>
<script type="text/javascript">
/* <![CDATA[ */
var IMAGE_SWITCH = { //a single global object, with publicly accessible methods and properties
pots : [
{ "title":"Image of the sample pan", "path":"images/small.jpg" },
{ "title":"Small Pan front view", "path":"images/front.jpg" },
{ "title":"Optional glass lid.", "path":"images/glasslid.jpg"},
{ "title":"Side elevation", "path":"images/side.jpg"}, //<--you were missing a comma here, a syntax error
{ "title":"Optional glass lid.", "path":"images/glasslid.jpg"},
{ "title":"With standard lid", "path":"images/withlid.jpg"},
{ "title":"Copper version", "path":"images/copperfry.jpg"},
{ "title":"Green version", "path":"images/greenfry.jpg"} //<--you had a comma here after the last object, a no-no on the last item in an array or object
],
pos : 0,
//id = a string, id of image
//way = a string, plus '+' or minus '-' sign in quotes
//titleId = a string, id of element to display title in
switchImage : function (id,way,titleId) {
if (way == '-') {
this.pos = (this.pos > 0) ? this.pos-1 : this.pots.length-1;
} else if (way == '+') {
this.pos = (this.pos < this.pots.length - 1) ? this.pos+1 : 0;
}
document.getElementById(id).src = this.pots[this.pos]["path"];
document.getElementById(titleId).innerHTML = this.pots[this.pos]['title'];
return false;
}
};
window.onload = function () {
IMAGE_SWITCH.switchImage('switchable',0,'title'); //passing 0 for second parameter so it does not increment or decrement IMAGE_SWITCH.pos
};
//you were missing the closing CDATA tag below
/*]]>*/
</script>
</head>
<body>
<div id="header">Content</div>
<div id="left">Content</div>
<div id="middle">
<div id="slideshow">
<h2>The 20 inch silver frying pan.</h2>
<p><img src="images/small.jpg" alt="small pan image" id="switchable" /></p>
<p id="title">Small Pan Image</p>
<p class="center">
<a href="#" onclick="return IMAGE_SWITCH.switchImage('switchable','-','title');">back</a>
<a href="#" onclick="return IMAGE_SWITCH.switchImage('switchable','+','title');">next</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
