What's the best jQuery "click a thumbnail and change the main image" module?

Question

Here's what I have (all generated dynamically, if that makes a difference) :

• A list of images
• A caption for each image
• A thumbnail for each image

The page should load with one full-size image and all the thumbnails. When a user clicks a thumbnail, the full-size image shows that new image with its caption. If they click another thumbnail, the picture (and caption) change again.

It's not very complex. I hacked together a solution a few months ago, but I need to do it again and I'm looking at this crappy code and thinking that there has to be a better way (and knowing jQuery, someone else has already done it, and done it well).

Thoughts? Links?

Thanks!

Answer 1

Most of the answers here are like shooting a fly with a canon !!

$('#thumbs img').click(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
    $('#description').html($(this).attr('alt'));
});

this is all you need .. 4 lines of code .

look here : gallery-in-4-lines