title: Swap multiple images from javascript array
body: <p>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.). </p>
  
  <p>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).</p>
  
  <p>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.</p>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script language="JavaScript" type="text/javascript"&gt;
  &lt;!--
  
  // 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 &lt; 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;
  }
  
  
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="portfolio"&gt;
    &lt;div id="thumbnails"&gt;
      &lt;a href="#" class="dimmer" onclick="swapImage(0)"&gt;&lt;img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(0)"  alt="Architect Portfolio Thumbnail 1" width="75" height="75" /&gt;&lt;/a&gt;
      &lt;a href="#" class="dimmer" onclick="swapImage(1)"&gt;&lt;img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(1)" alt="Architect Portfolio Thumbnail 2" width="75" height="75" /&gt;&lt;/a&gt;
      &lt;a href="#" class="dimmer" onclick="swapImage(2)"&gt;&lt;img src="images/portfolio/noThumb.jpg" id="theThumb" onload="loadThumb(2)" alt="Architect Portfolio Thumbnail 3" width="75" height="75" /&gt;&lt;/a&gt;
    &lt;/div&gt;
    &lt;div id="mainImage"&gt;&lt;img src="images/portfolio/samples/f1.jpg" alt="Architecture Portfolio Main Image" id="theImage" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>