Switch image when user clicks thumbnail

Question

OK guys. I want a larger displayed image to switch when a user clicks on a smaller thumbnail image.

This is my jquery script but so far it doesn't switch. Nothing happens when the thumbnail is clicked.

Its strange because I have two arrow images that slide the thumbsnails across when clicked but for some reason not when the acutal thumb is clicked. What on earth is going on?

JQuery:

$(document).ready(function () {

    // when image with ID thumb is clicked change src 
    $("img#thumb").click(function () {              
        var imgpath = $(this).attr("src");
        $("img#cover").attr("src", imgpath);
    });

    // slide more thumbnails 
    $("#arrowright").click(function () {
        $("#innerthumb").animate({ marginLeft: "-850px" });
    });

    $("#arrowleft").click(function () {
        $("#innerthumb").animate({ marginLeft: "0px" });
    });

    // image change on click
    $("img#thumb").click(function () {
        var newimg = $(this).attr("src");
        $("img#cover").attr("src", newimg);
    });

HTML

                    <div id="mainimage">
                        <div id="inner">
                            <img id="cover" src="images/environments/img0.jpg" width="980px" />
                            <img id="cover-old" src="" width="980px"/>
                        </div>
                    </div> <!--end of mainimage div-->

               <div id="arrowleft"><img src="images/arrowleft.png"></div>
                   <div id="innerthumb">
               <div id="thumb1" ><img id="thumb" src="images/environments/img0.jpg" width="160px" height="80px"/></div>
               <div id="thumb2" ><img id="thumb" src="images/environments/img1.jpg" width="160px" height="80px" /></div>
               <div id="thumb3" ><img id="thumb" src="images/environments/img2.jpg" width="160px" height="80px" /></div>
                   <div id="innerthumb"></div>
               <div id="arrowright"><img src="images/arrowright.png"></div>

You cannot re-use the same ID multiple times. [If your IDs aren't unique per page, you'll have a hard time selecting them](http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/7262229). — Joseph Silber, Jan 27 '13 at 19:37

score 0 · Answer 1 · answered Jan 28 '13 at 05:59

You should not have img with same id within the same page. This causes problem with jquery selector.

To solve your problem, you have to change the img id to say t1, t2, t3 and set a class=thumb and then on the jquery part do something like this

$("img.thumb").click(function () {
    var id = $(this).attr("id");
    var newimg = $("#"+id).attr("src");
    $("img#cover").attr("src", newimg);
});

Switch image when user clicks thumbnail

1 Answers1