Swap multiple images from javascript array

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>

Cheery · Accepted Answer · 2012-02-25 03:14:37Z

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/

edited Feb 25, 2012 at 3:14

answered Feb 24, 2012 at 3:54

Cheery

16.3k45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

26 Comments

Jason Over a year ago

Cheery, that works great Thanks! I don't understand your ps: though... is there a cleaner way to achieve the same effect?

Cheery Over a year ago

@Jason the 'noThumb.jpg' could load faster than image preload in preloadImages(). Oh, I see that you do not preload the thumbs, so why not to write them directly in img tag? you could even generate the list of 'a' and 'img' tags with javascript.

Jason Over a year ago

Cheery, I'm sure you could do those things. I am only a beginner. One question: Not all of the thumbnail galleries have a full set of images. Is there a simple way to execute the swap only if there is an image to pass?

Cheery Over a year ago

@Jason Is there a simple way to bypass the function if there is no image to pass Do you mean that thumb image may not exists on the server?

Jason Over a year ago

Exactly. There are 15 possible thumbnails, but some sets have fewer.

|

Aminadav Glickshtein · Accepted Answer · 2012-02-24 03:09:50Z

0

If you are a Javascript novice I recommend you to search in google about jQuery it is can help you a lot (Google also using it).

answered Feb 24, 2012 at 3:09

Aminadav Glickshtein

24.8k13 gold badges84 silver badges118 bronze badges

Collectives™ on Stack Overflow

Swap multiple images from javascript array

2 Answers 2

26 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

26 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related