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 imag

Answer 1

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.

    
    
1st image Description