带缩略图的基本jQuery图像库

我有一个基本图像库，有四个缩略图和四个大图像，其中一个显示，我希望能够单击每个缩略图，并将活动的大图像替换为单击的相应大图像，然后才能更改源的单个部分，如下所示，但此选项将不再有效，因为我无法再依赖图像的src：

jQuery('#thumbs').delegate('img','click', function() {
    jQuery('#panel img').attr('src', jQuery(this).attr('src').replace('99_99','600_399'));
});

我已将四个图像和缩略图中的每一个动态添加到两个阵列中：

var large_photos = jQuery('#panel').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

var thumbnails = jQuery('#thumbs').find('img').map(function(){
    return jQuery(this).attr('src');
}).get();

如何修改脚本，以便单击缩略图并显示较大的图像

HTML:

---

这使用单击的拇指的索引将类添加到大图像的相应索引中

$('#thumbs img').click( function() {
    var thumbindex = $(this).index();
    $('.active').removeClass('active');
    $('#panel img').eq(thumbindex).addClass('active');
});

---

我已经对此进行了测试，效果很好，谢谢，有没有办法从所有其他图像中删除活动类当活动类分配给图像时，目前它保留所有图像的类？调用

$（'.active'）。removeClass（'active'）在添加活动类之前
$('#thumbs img').click( function() {
    var thumbindex = $(this).index();
    $('.active').removeClass('active');
    $('#panel img').eq(thumbindex).addClass('active');
});