Question

I’m trying to get the main image to change depending on the thumbnail image clicked.
I would want the main image to take its new src from the a tag of the thumbnail that was clicked.

I’ve seen other methods using attr, src but in each case they specify manually the new “src”, how could i get the code to take the src from the a tag of the thumbnail clicked?

Would really appreciate if anyone could show me, thanks.

EDIT:

Trying to change the caption of the main photo, getting the new caption from the thumbnail clicked/ My simplified code looks like this

         <img src="{hotel_main_photo}" id="main_photo" class="view_page_photo frame"      width="420" height="320" alt="{title}" />

        <p>{main_caption}</p>

        <div id="thumbnails">

            <img src="{thumb}" width ="" height="" alt="" />

                            <p>{thumb_caption}</p>

            {/hotel_other_photos}

        </div>

I’m basically trying to change the ‘main_caption’ to display the thumb_caption of the thumbnail clicked. I could store the thumb_caption as the title or alt if that would help?

Thanks again

EDITED AGAIN(!)

I think using James’ suggestion, I’ve sort of figured it out with the following

$(“#main_caption”).text($(this).attr(“alt”));

Answer 1

Something like this should do the trick:

$(".thumbnail").click(function() {
    $("#mainImage").attr("src", $(this).attr("src"));
});

It simply gets the src of the clicked .thumbnail element and uses it as the src value of #mainImage.