Image gallery array help (code included)

max1973 · May 7, 2004

Hi there. I'm trying to build a simple image gallery where I can change multiple images based on selecting a top from a dropdown list (ie. selecting a submitting 'cars' from the dropdown list populates the images table with pictures of cars and so on). I've been looking around and haven't found anything quite suitable that doesn't rely on asp or refreshing the page. Any help would be much appreciated.

I have this so far but it doesn't work...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>
var imageTags;
var maxPics = 0;
var carPics = new Array("red.gif");
var vacationPics = new Array("green.gif"");

function determineMaxPics()
{
for(var i=0; i<pictureChanger.length; i++)
{
var numPics = eval(pictureChanger.value).length;
if(numPics > maxPics)
maxPics = numPics;
}//end for
}//end determineMaxPics()

function updatePictures(arrayName)
{
var i=0;
var picArray = eval(arrayName);
for(; i<picArray.length; i++)
imageTags.src = picArray;

for(; i<maxPics; i++)
imageTags.src = ""; //empties trailing picture tags
}//end updatePictures(var)
</script>

</head>

<body>

<img name='image1' src=''><br />
<img name='image2' src=''><br />
<select name='pictureChanger' onchange='updatePictures(this.value);'>
<option value='carPics'>cars</option>
<option value='vacationPics'>vacation</option>
</select>

</body>
</html>

blicero · May 7, 2004

This may not be very helpful...

but if i were to attempt to tackle such a project, i would probably do it in php instead of javascript.

kaht · May 7, 2004

I'd suggest putting the images into tables, and then using the .display style to make them hidden or shown. This way you don't have to worry about having a different number of images per dropdown choice:

Code:

<html>
<head>
<script type="text/javascript">

function visibility(obj) {
   carDisplay = (obj.value == "car") ? "" : "none";
   vacDisplay = (obj.value == "vac") ? "" : "none";
   document.getElementById("carTable").style.display = carDisplay;
   document.getElementById("vacTable").style.display = vacDisplay;
}

</script>
</head>
<body>
<select onchange='visibility(this)'>
<option value=car>Cars</option>
<option value=vac>Vacation</option>
</select>
<table id="carTable">
<tr>
<td><img id="car1" src="car1.jpg"></td>
<td><img id="car2" src="car2.jpg"></td>
</tr>
</table>
<table id="vacTable" style="display: none">
<tr>
<td><img id="vac1" src="vac1.jpg"></td>
<td><img id="vac2" src="vac2.jpg"></td>
<td><img id="vac3" src="vac3.jpg"></td>
</tr>
</table>
</body>
</html>

-kaht

elck · May 9, 2004

your original script seems to lack things

I do not see you populate the imageTags array
(maybe like this:
imageTags=document.body.getElementsByTagName("IMG")

Nor do I see how you walk this array when applying the source
(maybe thus:
for(; i<picArray.length; i++)
imageTags.src = picArray;
)

this works alright

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image gallery array help (code included)

max1973

Programmer

blicero

Programmer

kaht

Programmer

elck

Programmer

Similar threads

Part and Inventory Search

Sponsor