Question

I have four or five thumbnails next to a full-size image. When I click the thumbnail, I just want it to replace the full-size image.

Thumbnail:

<a href="newimage.jpg" class="enlarge"><img src="thumbnail.jpg" alt="thumbnail" /></a>

Fullsize:

<div id="folio-detail">
<img id="fullImage" src="image.jpg" />
</div>

jQuery:

$(function(){
        $("a.enlarge").live('click', function (e) {
            e.preventDefault();
            $("img#fullImage").attr("src", $(this).attr("href"));
         });
    });

This isn’t working … any help?

Answer 1

A reference to jQuery needs to come before your code so that the jQuery ($) function is defined. I’ve slightly changed your code too (which was working), but hopefully the change makes it clearer

<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript">
$(function() {
    $("a.enlarge").live('click', function (e) {
       e.preventDefault();
       var href = this.href;
       $("#fullImage").attr("src", href);
    });
});
</script>

An example