サムネイルを含む基本jQuery画像ギャラリー

Question

私は4つのサムネイルと4つの大きな画像の1つが表示されている基本的な画像ギャラリーを持っています。各サムネイルをクリックして、アクティブな大きな画像を対応する大き​​な画像

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

私は動的に持っている：私は以下のように元の単一の部分を変更することができませんでしたが、私はもはや画像のSRCに依存することができますように、このオプションが機能しなくなります前に、クリックされたものに4つの画像とサムネイルのそれぞれを2つの配列に追加しました：

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> 

Answer 1

これは大きな画像の対応するインデックスにクラスを追加するためにクリックした親指のインデックスを使用しています。

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