Question

This might be a really newb question, but I really need help here, I have 5 thumbnails and a big image.

What I simply want to do is, when you click on a thumbnail, the big image change. The big image is always an animated gif, thats why I used some preloaded images. (I had a problem on FF where the animation wasnt showing on changing only the src)

Here’s the code

function preloader()
{
if (document.images)
    {
      pic1= new Image(800,550);
      pic1.src='contest-landing/card_large1.gif';

      pic2= new Image(800,550);
      pic2.src='contest-landing/card_large2.gif';

      pic3= new Image(800,550);
      pic3.src='contest-landing/card_large3.gif';
    }
}

$j("li img").on("click", function(){
     var whatImage = $j(this).attr('id');
     //document.bigImage.src = pic3.src That is working, its always showing the image #3
     document.bigImage.src = pic+whatImage.src // I cant get that to work, so it doesnt show always the same image
 });

HTML:

<ul>
    <li><img src='/card_thumb1.jpg' id="1" class="cardThumb"></li>
    <li><img src='/card_thumb2.jpg' id="2" class="cardThumb"></li>
    <li><img src='/card_thumb3.jpg' id="3" class="cardThumb"></li>            
</ul>

<img id="bigImage" name="bigImage" src='card_large1.gif' width="800" height="550"  />

So, my question is more syntax related. I want to replace that line

document.bigImage.src = pic3.src

so the number is taken from the id.

Answer 1

Try storing the Image objects in properties of another object instead of using separate variables for each one.

var pics = {}; // An object to hold our Images. Always use `var` to declare variables!

function preloader() {

    if (document.images) {

        pics[1] = new Image(800, 550);
        pics[1].src='contest-landing/card_large1.gif';

        pics[2] = new Image(800, 550);
        pics[2].src='contest-landing/card_large2.gif';

        pics[3] = new Image(800, 550);
        pics[3].src='contest-landing/card_large3.gif';

    }
}

$j("li img").on("click", function(){
    var whatImage = this.id;
    document.getElementById('bigImage').src = pics[whatImage].src;
});

You could (and should) use a non-numeric id attribute for those elements, by the way.