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

Answer 2

Have you tried Lightbox? http://leandrovieira.com/projects/jquery/lightbox/

Answer 3

Here's one that looks pretty nice and is written in jQuery: Photo Slider

And here is another which I like a bit better: Galleria

Answer 4

Building off of krembo99's answer he linked here, I wanted to share my solution as I had already uploaded hundreds of photos when my client had requested a feature like this. With that in mind, by adding a few extra lines to the provided code, I was able to get a solution that fit my parameters.

I was also working with smaller images as well, so I had no need to go through creating small & large versions of the same file.

$('.thumbnails img').click(function(){

 // Grab img.thumb class src attribute
 // NOTE: ALL img tags must have use this class, 
 // otherwise you can't click back to the first image.

 var thumbSrc = $('.thumb').attr('src');

 // Grab img#largeImage src attribute
 var largeSrc = $('#largeImage').attr('src');

  // Use variables to replace src instead of relying on file names.
  $('#largeImage').attr('src',$(this).attr('src').replace(thumbSrc,largeSrc));
  $('#description').html($(this).attr('alt'));

});

Here's how my HTML looks.

    <img src="path/to/file1.jpg" id="largeImage" class="thumb">
    <div id="description">1st image Description</div>

    <div class="thumbnails">

     <img src="path/to/file1.jpg" class="thumb" alt="1st image description">
     <img src="path/to/file2.jpg" class="thumb"alt="2nd image description">
     <img src="path/to/file3.jpg" class="thumb" alt="3rd image description">
     <img src="path/to/file4.jpg" class="thumb" alt="4th image description">
     <img src="path/to/file5.jpg" class="thumb" alt="5th image description">

    </div>

Answer 5

http://bradblogging.com/jquery/9-jquery-slideshow-applications-you-cannot-miss/

A page with 9 different photo slideshows in jQuery ready to use

Answer 6

Check out my galleria implementation: Garden design Landscaper in Essex Gallery