CODEWITHSUNDEEP
jquerycsshtml
aramaz2
aramaz2

Reputation: 3

Click on a thumbnail, an image in a div changes

I am trying to do the following:

What would be the best way to do this?

I tried something like this:

<a href="#" id="changeImage" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
<div id="imageBox">&nbsp;</div>

and the jquery script

<script type="text/javascript">
$(document).ready(function(){
    $('#changeImage').click(function(){
        var $rel = $(this).find('a').attr('rel');
        $("#imageBox").html("<img src='image" + $rel + ".jpg' />");
    })
})

</script>

but it's not working.

Thanks for the help!

Upvotes: 0

Views: 7096

Answers (3)

rhodesit
rhodesit

Reputation: 41

#changeImage should be .changeImage

Upvotes: 0

Kon
Kon

Reputation: 27441

Try: 

$(document).ready(function(){
    $('#changeImage').click(function(){
        var rel = $(this).attr('rel');
        $("#imageBox").html("<img src='image" + rel + ".jpg' />");
    })
});
  • Your original code is targeting an attribute of an anchor inside the 'changeImage' anchor. You were going one level too deep.
  • I also removed an unnecessary usage of $ with 'rel' variable.
  • And lastly, added a semicolon at the very end.

Also, I'd suggest you have a placeholder image (inside 'imageBox') and just change its 'src' attribute (instead of manipulating the DOM so much for no reason). Something like this: 

$("#imageBox img").attr('src', 'image' + rel + '.jpg');

Upvotes: 3

Damien-Wright
Damien-Wright

Reputation: 7544

I think what you want is:

<script type="text/javascript">
$(document).ready(function(){
    $('#changeImage').click(function(){
        var $rel = $(this).attr('rel');
        $("#imageBox").html("<img src='image" + $rel + ".jpg' />");
    })
})

</script>

Because you clicked on the <a>, $(this) is the element with the rel attribute... The .find('a') was searching for a child element within the link you clicked.

Your code would have worked with this html:

<a href="#" id="changeImage">
    <a href="#" rel="1"><img class="thumb" src="image1_thumb.jpg" /></a>
</a>
<div id="imageBox">&nbsp;</div>

Which is obviously redundant...

Hope that helps :)

Upvotes: 1

Related Questions