Question

I have thumbnail images below a larger image. The thumbnails, when clicked, need to fade out the current large image, and fade in the thumbnail’s large image. All the images and theumbnails are being pulled from the database.

Whats the best way to go about doing this?

$(document).ready(function(){
    $('.thumbnail').live('click', function(){
        var self = this;
        $('#hero img').fadeOut(function(){
            $('#hero img').attr('src', self.src.replace('50x50', '572x362')).fadeIn();
        });
   });
});

Answer 1

the client side, using jQuery, would look something like:

$('.thumbnail').live('click', function(ev){
   ev.preventDefault();
   var self = this;
   $('.largeImage').fadeOut(function(){
      $('.largeImage').attr('src', self.src.replace(/_sm/, '_lg')).fadeIn();
   });
});

Your PHP then just generates the markup with <img class="thumbnail" src="some_img_sm.jpg"> and some div <img class="largeImage">