Question

I am coding a website with multiple pages of thumbnail image galleries. I want to populate the thumbnail images on each page from an array, so that I won’t have to change the path of multiple images on each page. The folder path is defined in a var statement – which I would like to be the only unique element on each gallery page – and the images in each gallery’s folder will have the same names (t1.jpg, t2.jpg, etc.).

I have the main image swap working, and tried to use a similar function for the thumbnails, but it doesn’t work because the image ID is the same for all the thumbnail images. I could give each image a unique ID, but then would have to call a separate function for each thumbnail swap (15 per page).

I am a javascript novice and despite much searching I can’t figure out how to work around this or find any similar examples. Any help or advice would be appreciated.

Javascript:

<script language="JavaScript" type="text/javascript">
<!--

// Thumbnail Image Array
var imgThumbs = new Array (
"t1.jpg",
"t2.jpg",
"t3.jpg"
)

//Main Image Array
var imgArray = new Array (
"f1.jpg",
"f2.jpg",
"f3.jpg"
)

//Image Path
var imgPath = "images/portfolio/samples/";

function preloadImages() {
     for(var i = 0; i < imgArray.length; i++) {
          var tmpImg = new Image;
          tmpImg.src = imgPath + imgArray[i];
     }
}

//Thumbnail Image Swap Function
function loadThumb(thumbID) {
     var theThumb = document.getElementById('theThumb');
     var newThumb;
     newThumb = imgThumbs[thumbID];
     theThumb.src = imgPath + newThumb;
}

//Main Image Swap Function
function swapImage(imgID) {
     var theImage = document.getElementById('theImage');
     var newImg;
     newImg = imgArray[imgID];
     theImage.src = imgPath + newImg;
}


//-->
</script>

HTML:

<div id="portfolio">
  <div id="thumbnails">
    <a href="#" class="dimmer" onclick="swapImage(0)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(0)"  alt="Architect Portfolio Thumbnail 1" width="75" height="75" /></a>
    <a href="#" class="dimmer" onclick="swapImage(1)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(1)" alt="Architect Portfolio Thumbnail 2" width="75" height="75" /></a>
    <a href="#" class="dimmer" onclick="swapImage(2)"><img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(2)" alt="Architect Portfolio Thumbnail 3" width="75" height="75" /></a>
  </div>
  <div id="mainImage"><img src="images/portfolio/samples/f1.jpg" alt="Architecture Portfolio Main Image" id="theImage" /></div>
</div>

Answer 1

Each ID attribute on the page should be unique. Remove them and rewrite your code as:

function loadThumb(thumbID, obj) {
     var newThumb = imgThumbs[thumbID];
     obj.src = imgPath + newThumb;
}

And the corresponding HTML part will look like

<img src="images/portfolio/noThumb.jpg" onload="loadThumb(0, this)"  
    alt="Architect Portfolio Thumbnail" width="75" height="75" />

ps: Actually I do not see the purpose of that script – onload function could be triggered before the image is loaded in a preloadImages() function.

pps: try this code http://jsfiddle.net/4cKvs/ and jQuery variant http://jsfiddle.net/zSBNR/