Need help with multiple photoarrays on same webpage for multiple galleries

Hi,

I am having trouble creating two different image galleries on the same webpage. I have one on the left hand side with thumbs and one on the right hand side with thumbs. I am using photoarray to assign different images ineach gallery. I can get one gallery working fine but when code the other galllery with a new location they both fail. here is my code for the one gallery:



<script language="JavaScript">

<!--

// Script to swap images into right table cell

//create array for photos

var photoArray=new Array()

photoArray[0]=new Image()

photoArray[1]=new Image()

photoArray[2]=new Image()

photoArray[3]=new Image()

photoArray[4]=new Image()



// populate array with photos

photoArray[0].src="images/photos/image1.gif"

photoArray[1].src="images/photos/image2.gif"

photoArray[2].src="images/photos/image3.gif"

photoArray[3].src="images/photos/image4.gif"

photoArray[4].src="images/photos/image5.gif"



// swap photo function

function photoSwap(i)

{

document.gallery1.src=photoArray.src

}

//-->

</script>



The name/location of the gallery1:

<td><image scr="images/photos/image1.gif" alt="" name="gallery1" id="gallery1"></td>



The script works fine when i just have this one coded but when i code the second gallery the first one does not run as it should. I have tried changing the name of the document to gallery2.src and that causes an error. If I change the name of the phtoarray it also causes an error. Is there something i am missing or can't I create 2 seperate photoarrays on a single page to display in 2 different locations. I am very new to scripting and this is driving me crazy.



Thanks,



Greg

 

The reason it is failing is that you are trying to use the variable PhotoArray and the function photoswap twice. When you create the second one you are OVERWRITING the first.

Which is why to have a second one you should call the variable something like PhotoArray2 and the function PhotoSwap2

I would probably switch to using nested arrays to auto-generate most of what you are hardcoding. Something like this for the javascript (completely untested - just a general idea)

var galleries=new Array();
var galleries[0]=new Array('image1.gif','image2.gif','image3.gif','image4'gif','image5.gif');
var galleries[1]=new Array('image6.gif','image7.gif','image8.gif','image9.gif','image10.gif');
var galleryPrefix='images/photos/';

/* cycle through our galleries and preload them */
var galleryImages=new Array();
for (t=0; t<galleries.length; t++) {
	galleryImages[t]=new Array();
	for (n=0; n<galleries[t].length; n++) {
		/* add the prefix here, so we don't have to later */
		galleries[t][n]=galleryPrefix+galleries[t][n];
		/* preload the image */
		galleryImages[t][n]=new Image();
		galleryImages[t][n].src=galleries[t][n];
	}
}

function photoSwap(gallery,index) {
	document.getElementById('gallery_'+gallery).src=galleries[gallery][index];
}

Code (markup):

Which would use a image tag like this:

<img
	src="images/photos/image1.gif"
	alt="gallery image"
	id="gallery_0" 
/>

Code (markup):

just be sure on the second gallery to give it the ID gallery_1. Should work - though again this is untested. You could even expand this to change the alt text off another array.

 

Thanks much, I got it to work. My goof as i looked back on what i was doing I forgot to rename the function when i placed the script on the image file.

Much appreciated.

Greg