// first thumbnail is always the current image, so it // should start out being selected $('#photo_gallery ul li:first-child img').addClass('selected'); // set the last thumbnail's margin to 0 $('#photo_gallery ul li:last-child').addClass('last'); // all thumbnails should begin with lower opacity $('#photo_gallery ul img').animate({ opacity: 0.75 }).hover( // on mouseover: function(e) { var thumbnail = $(e.target); // selected status should be removed from all thumbnails thumbnail.parent().siblings().children().removeClass('selected'); // thumbnail opacity should go back up to 100% thumbnail.stop().animate({ opacity: 1 }, "fast"); // thumbnail should become selected thumbnail.addClass('selected'); // main image should be updated with thumbnail image var new_photo = thumbnail.attr('src').replace('_thumbnail',''); $('#photo_gallery img#main').attr('src', new_photo); }, // on mouseout: function(e) { // opacity should drop back down $(this).stop().animate({ opacity: 0.75 }); } );