Thumbのロールオーバー時に別のDIVで大きな画像を表示

Question

フルサイズの製品イメージと4つのサムネイルがあるページがあります。ロールオーバーまたは各サムネイル（いずれか1つ）をクリックすると、フルサイズの画像を変更したいと思います。フルサイズの画像もデフォルトの最初のサムネイルにする必要があります。

私はこれを行う方法が厳密ではなく、複数の製品フォルダと製品名がありますが、命名規則はすべて似ています。

私はこれが（罰金ですが、私はに少し新しいです）jQueryのだろう推測するが、ここでのシナリオでいます：ここで

<div class="fullsizeimage">show /images/products/prod_1/produ_name_1_large.jpg here by default but change as the thumbs are rolled over or clicked.</div> 

<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div> 
... 

詳細は以下のとおりです。

• イメージ名prod_nameとprod_1以外のすべてのファイル/ images/products/prod_name/prod_name_1_small.jpg（100x100px）とimages/products/prod_name/prod_name_1_large.jpg（400x400px）がフォルダごとに異なります。
• 10枚のサムネイル。
• 最初のサムネイルには、デフォルトでフルサイズの対応がロードされます。

私はこれをjQueryでのみ行い、可能であればこのパターンに当てはまるものすべてを再利用することをお勧めします。

これについての任意の方向性ありがとう！このような

Answer 1

私は、これはいくつかの単純なjQueryのよりも少し複雑になると信じて

が、私はのようなもののために、いくつかのプラグインを見てきましたこれは非常に使いやすいです。http://wayfarerweb.com/jquery/plugins/simplethumbs/

Answer 2

何か：

<div class="fullsizeimage"> 
    <img src="/images/products/prod_1/produ_name_1_large.jpg" /> 
</div> 

<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_2_small.jpg"></a></div> 
<div class="thumbimage"><a href="#"><img src="images/products/prod_1/prod_name_3_small.jpg"></a></div> 



$('.thumbimage a img').on('click hover',function(){ 
    $('.fullsizeimage img').attr('src',$(this).attr('src')); 
}); 

いますが、これに応じて、あなたのHTML構造を変更する必要があり、そしてあなたは、URL文字列を解析し、IMGのため

「大」と「小」交換する必要がjquerys load（）ハンドラを使用することができます。

あなたも大きくIMGのURLと隠し要素を追加して解析することができ、この：

<div class="thumbimage"> 
    <a href="#"><img src="images/products/prod_1/prod_name_1_small.jpg"></a> 
    <span class="url hidden">/images/products/prod_1/produ_name_1_large.jpg</span> 
</div> 

$('.thumbimage a img').on('click hover',function(){ 
    $('.fullsizeimage img').attr('src',$(this).parents('.thumbimage').find('.url').text()); 
});