Javascript: Clicking thumbnails to switch a larger image. Best method?

StackOverflow https://stackoverflow.com/questions/1640727

Question

I've been looking for a really easy/lightweight way to just be able to click thumbnails to switch the src of a larger image.

I haven't actually tried it out yet. Is this the best solution?

The larger images to be swapped in will have the same width but a different height. Will this cause problems/is there something I need to add for this functionality? Would it be better to do a div with a background-image that swaps and is the height of the largest image?

Also, someone said that it only works once (??)... I'd need it to start out on a certain image, then be able to change to 2-4 other images on thumbnail click.

Thanks for any advice! I'm certainly (obviously) no Javascript writer.

Was it helpful?

Solution

You should be able to switch images as many times as you wish.

The piece of code you reference replaces the image source of #target, with the href of a link within a #thumbs div. It should work fine.

<img id="target" src="images/main.jpg">

<div id="thumbs">
<a href="images/picture1_big.jpg"><img src="images/picture1_small.jpg"></a>
<a href="images/picture2_big.jpg"><img src="images/picture2_small.jpg"></a>
<a href="images/picture3_big.jpg"><img src="images/picture3_small.jpg"></a>
</div>

Now as far as width and height, I am pretty sure there are some cross-browser compatibility issues with how browsers handle a defined width, but an undefined height, when you swap out the images.

In firefox, the following works. Plain old javascript, no jquery:

<html>

   <head>

     <script type="text/javascript">
         function swap(image) {
             document.getElementById("main").src = image.href;
         }
     </script>

   </head>

   <body>

     <img id="main" src="images/main.jpg" width="50">

     <a href="images/picture1_big.jpg" onclick="swap(this); return false;"><img src="images/picture1_small.jpg"></a>
     <a href="images/picture2_big.jpg" onclick="swap(this); return false;"><img src="images/picture2_small.jpg"></a>
     <a href="images/picture3_big.jpg" onclick="swap(this); return false;"><img src="images/picture3_small.jpg"></a>

   </body>
</html>

OTHER TIPS

This example eliminates loading time after clicking on thumbnails:

HTML:

<div id="big-image">
    <img src="http://lorempixel.com/400/200/sports/1/">
    <img src="http://lorempixel.com/400/200/fashion/1/">
    <img src="http://lorempixel.com/400/200/city/1/">
</div>

<div class="small-images">
    <img src="http://lorempixel.com/100/50/sports/1/">
    <img src="http://lorempixel.com/100/50/fashion/1/">
    <img src="http://lorempixel.com/100/50/city/1/">
</div>

Javascript:

$(function(){
    $("#big-image img:eq(0)").nextAll().hide();
    $(".small-images img").click(function(e){
        var index = $(this).index();
        $("#big-image img").eq(index).show().siblings().hide();
    });
});

http://jsfiddle.net/Qhdaz/2/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top