If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

multiple image arrays interfere with each other

Hi,

I was wondering how to have multiple image arrays in a page so that each has a different set of images allocated to it. The image array also has to be clickable to move onto the next image and have next and previous button links. Most of this I've already done its just the arrays interfering with each other that gives me problems. So on clicking next each will show the images from only one given array. I think it may be to do with giving each a specific ID somehow but I'm pretty unsure on how to do that..

The scripts I'm using are below with part of the site and some dummy images of a friends work. I just need to get the arrays working properly and have been trying for ages by myself.. I'm probably missing something incredibly simple..

Thanks in advance to anyone who answers back! Any kind of help is welcomed,
Max

Code:

<script language="JavaScript">
/* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/
var image = new Array("http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M2.jpg", "http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M6.jpg",
"http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M7.jpg")
var imgNumber=1
/* This number is used to refer to a value of the Array and to know what image should be shown next. */
var numberOfImg = image.length
/* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */
/* Now it's time to make the functions for the next and previous buttons */
function previousImage(){
if(imgNumber > 1){
imgNumber--
}
/* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
else{
imgNumber = numberOfImg
}
/* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */
document.slideImage.src = image[imgNumber-1]
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
/* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */
else{
imgNumber = 1
}
/* If you already are at the last image, and you click the next button, the slideshow must show the first image. */
document.slideImage.src = image[imgNumber-1]
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
}
</script><!--Imagearray1-->
<script language="JavaScript">
/* Here you make an array with all the URL's of the images you would like to have in your slideshow.*/
var image = new Array("http://www.johnbarton.co.uk/Uploads/Terralec/Te0", "http://www.johnbarton.co.uk/Uploads/Terralec/Te5.jpg",
"http://www.johnbarton.co.uk/Uploads/Terralec/Te7.jpg")
var imgNumber=1
/* This number is used to refer to a value of the Array and to know what image should be shown next. */
var numberOfImg = image.length
/* This is the total amount of images you use, it is used to determine if the imgNumber can still grow. */
/* Now it's time to make the functions for the next and previous buttons */
function previousImage1(){
if(imgNumber > 1){
imgNumber--
}
/* The if statement is used to know if you aren't already at the first image, because if you are, imgNumber may not decrease. */
else{
imgNumber = numberOfImg
}
/* If you already are at the first image, and you click the previous button, the slideshow must show the last image. */
document.slideImage1.src = image[imgNumber-1]
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
}
function nextImage1(){
if(imgNumber < numberOfImg){
imgNumber++
}
/* The if statement is used to know if you aren't already at the last image, because if you are, imgNumber may not increase. */
else{
imgNumber = 1
}
/* If you already are at the last image, and you click the next button, the slideshow must show the first image. */
document.slideImage1.src = image[imgNumber-1]
/* Load the image into the document. Don't forget to write imgNumber-1, an array always starts from 0! */
}
</script><!--Imagearray2-->
</head>
<body>
<div id="contentcentre">
<div id="content">
<div id="bigspace">
</div>
<!--projectstart-->
<div id="title" onclick="javascript:animatedcollapse.toggle('profile')">
<span style=color:#FC0;>Project</span>
</div>
<div id="space">
</div>
<div id="profile">
<div>
<img src="http://www.johnbarton.co.uk/Uploads/Jade&Michael/J&M2.jpg" name="slideImage" onclick="nextImage();"alt="Graze"/>
</div>
<p></p>
<span style="color: #333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet cursus nunc, vel semper elit tempor in. Aenean a mauris ac purus sagittis laoreet. <br/>
&ndash;
<br/>
<span style="color: #FC3;"><a href="JavaScriptreviousImage()"><</a></span> /
<span style="color: #FC3;"><a href="JavaScript:nextImage()">></a></span>
</span>
<span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
<p></p>
</div>
</div>
<!--projectend-->
<div id="content">
<!--projectstart-->
<div id="title" onclick="javascript:animatedcollapse.toggle('project1')">
<span style=color:#666; margin:10px;>Showboating</span>
</div>
</div>
<div id="space">
</div>
<div id="project1" style="width: 750px; display:none">
<div>
<img src="http://www.johnbarton.co.uk/Uploads/Terralec/Te0" name="slideImage1" onclick="nextImage1();"alt="Graze"/>
</div>
<p></p>
<span style="color: #333;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet cursus nunc, vel semper elit tempor in. Aenean a mauris ac purus sagittis laoreet. <br/>
&ndash;
<br/>
<span style="color: #FC3;"><a href="JavaScriptreviousImage1()"><</a></span> /
<span style="color: #FC3;"><a href="JavaScript:nextImage1()">></a></span>
</span>
<span style="text-align: right; color:#333"><a href="">fullscreen</a></span>
<p></p>
</div>
</div>
<!--projectend-->
</div>
</div>
</body>
</html>