Dynamic javascript image gallery 1

max1973 · Apr 27, 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 reply on asp or refreshing the page. Any help would be much appreciated.

martin

jemminger · Apr 27, 2004

martin,

welcome to the world of writing your own software! i recommend you start writing some pseudo-code to describe how you plan to accomplish this, then write real code. since it sounds like you want to avoid server-side code, you will need to store a "database" of all available images, perhaps in an array.

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

LFI · Apr 27, 2004

Martin,

I'm guessing that you have enough image tags to handle all the images of a particular category.

I would try this:

(1) have a global javascript variable that is an array. Call it 'imageTags' or something. In the BODY tag's onload event, collect the page's image tags by: imageTags = document.getElementsByTagName("IMG"); (I don't know if getElementsByTagName(...) is browser-specific, but it works in IE6... There are other ways to collect these anyway). You will also need (by this method) a global variable that holds the size of the maximum picture array.

(2) create arrays in javascript with the images you want displayed. For example:

var carPics = new Array("car1.bmp","jaguar.jpg","jalopy.gif");
var vacationPics = new Array("Greece.gif","TowerPisa.jpg","GrandCanyon.gif","GrandmasHouse.gif");
etc.

(3) set the onchange event of the drop-down list to something like: onchange='updatePictures(this.value);' ...making sure that the values of the options are the same names as the arrays in (2), above.

(4) create the javascript: function updatePictures(arrayName)

Here is a small sample code that works for me:

Code:

<html>
<head>
<script>
var imageTags;
var maxPics = 0;
var carPics = new Array("car1.bmp","jaguar.jpg","jalopy.gif");
var vacationPics = new Array("Greece.gif","TowerPisa.jpg","GrandCanyon.gif","GrandmasHouse.gif","Nic1.bmp");

function determineMaxPics()
{
 for(var i=0; i<pictureChanger.length; i++)
 {
  var numPics = eval(pictureChanger[i].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[i].src = picArray[i];

 for(; i<maxPics; i++)
  imageTags[i].src = ""; //empties trailing picture tags
}//end updatePictures(var)
</script>
<body onload='imageTags = document.getElementsByTagName("IMG");determineMaxPics();'>
<img name='image1' src=''><br />
<img name='image2' src=''><br />
<img name='image3' src=''><br />
<img name='image4' src=''><br />
<img name='image5' src=''><br />
<select name='pictureChanger' onchange='updatePictures(this.value);'>
<option value='carPics'>cars</option>
<option value='vacationPics'>vacation</option>
</select>
</body>
</html>

Of course, you get those #*(&@#$ little x's that tell you there is a picture missing, so if you have unequal lengths to your picture arrays, you may want to keep a little blank gif around to stick into the empties (to hide that blasted 'x'!).

'hope this helps.

--Dave

'hope this helps!

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!

Dynamic javascript image gallery 1

max1973

Programmer

jemminger

Programmer

LFI

Programmer

Similar threads

Part and Inventory Search

Sponsor