带缩略图的基本jQuery图像库

我有一个基本的图像库，其中显示了四个缩略图和四个大图像之一，我希望能够点击每个缩略图并用相应的大图像替换活动的大图像被点击了什么，我能够改变如下源的单一部件之前，但此选项将不再工作，我可以不再依赖于图像的src：带缩略图的基本jQuery图像库

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：

<div id="panel"> 
    <img src="/cache/data/691294/IMGP1617_600_399_s_c1.JPG" alt="" width="600" height="399" /> 
    <img src="/cache/data/691294/IMGP1618_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" /> 
    <img src="/cache/data/691294/IMGP1619_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" /> 
    <img src="/cache/data/691294/IMGP1620_600_399_s_c1.JPG" alt="" width="600" height="399" style="display: none;" /> 
</div> 

<div id="thumbs"> 
    <img src="/cache/data/691294/IMGP1617_99_99_c1.JPG" alt="" width="99" height="99" /> 
    <img src="/cache/data/691294/IMGP1618_99_99_c1.JPG" alt="" width="99" height="99" /> 
    <img src="/cache/data/691294/IMGP1619_99_99_c1.JPG" alt="" width="99" height="99" /> 
    <img src="/cache/data/691294/IMGP1620_99_99_c1.JPG" alt="" width="99" height="99" /> 
</div>

来源

2012-02-09 Stuart

这使用点击拇指的索引到一个类添加到大的图像的对应的索引。

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

来源

2012-02-09 23:09:16 mrtsherman

完美，谢谢，正是我所需要的。 – Stuart 2012-02-09 23:11:12

我已经测试了这一点，它工作得很好，谢谢，有没有什么办法可以将活动类从所有其他图像中删除，当类活动分配给图像，目前它保留所有图像的类？ – Stuart 2012-02-09 23:25:26

调用'$（'.active'）。removeClass（'active'）;'在添加活动类之前 – mrtsherman 2012-02-10 01:41:24

带缩略图的基本jQuery图像库

回答

相关问题