多数のギャラリーを1つのサムネイルセットで回転する

Question

私はチェックアウトで商品ページを作成しています。このページには、クリックすると、メインイメージとそれに対応するサムネイルを新しいカラーのイメージで更新する必要がある見本があります。あなたはここにページを見ることができます：http://www.briansugden.com/ai/tron.html un/pwはai/aiです。ここで

は、私が持っているコードです：

<div id="productGallery"> 

    <div id="tronGallery_1" class="tab"> 
     <div class="productGalleryMainImg"> 
      <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div> 

     <div id="productThumbs"> 

      <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a> 

      <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

     </div> 
    </div> 


    <div id="tronGallery_2" class="tab"> 
     <div class="productGalleryMainImg"> 
      <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div> 

     <div id="productThumbs"> 

      <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a> 

      <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

     </div> 
    </div> 


    <div id="tronGallery_3" class="tab"> 
     <div class="productGalleryMainImg"> 
      <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div> 

     <div id="productThumbs"> 

      <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a> 

      <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

     </div> 
    </div> 


    <div id="tronGallery_4" class="tab"> 
     <div class="productGalleryMainImg"> 
      <img id="photoLarge" src="images/tron/tron_satin_1.jpg" width="540" height="415" /></div> 

     <div id="productThumbs"> 

      <a href="images/tron/tron_satin_1.jpg"><img id="thumb01" src="images/tron/thumb.jpg" width="100" height="77" class="thumb active" /></a> 

      <a href="images/tron/tron_satin_2.jpg"><img id="thumb02" src="images/tron/thumb2.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_3.jpg"><img id="thumb03" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

      <a href="images/tron/tron_satin_4.jpg"><img id="thumb04" src="images/tron/thumb.jpg" width="100" height="77" class="thumb" /></a> 

     </div> 
    </div> 


</div> 

、メイン親指（メイン画像のビューを変更）だけでなく、見本（新色に全体のギャラリーを変更する）ためのjavascript：

$(function(evt) { 
    $("a:has(img.thumb)").click(function() { 
     var largePath = $(this).attr("href"); 

     $("#photoLarge").attr({ src: largePath }); 
     return false; 

    }); 

    $("#productThumbs > a > img").click(function(e){ 
     e.preventDefault(); 
     $("#productThumbs > a > img").addClass("active").not(this).removeClass("active"); 
     }); 

}); 




$(document).ready(function() { 

      $("#tronGallery_2").hide(); 
      $("#tronGallery_3").hide(); 
      $("#tronGallery_4").hide(); 

      var clickHandler = function (link) { 
       $(".tab").hide(); 
       $("#tronGallery_" + link.data.id).show(); 
       $(".active").removeClass("active"); 
       $(this).attr("class","active"); 
      } 

      $(".swatch1").bind("click", {id:"1"} ,clickHandler); 
      $(".swatch2").bind("click", {id:"2"} ,clickHandler); 
      $(".swatch3").bind("click", {id:"3"} ,clickHandler); 
      $(".swatch4").bind("click", {id:"4"} ,clickHandler); 

     }) 
     </script> 

divを正しく切り替えることはできません。スウォッチをシャグナップすると、親指は機能しません。私は問題が何であるか知っていると思うが、私はそれを修正する方法を知らない。私は、スウォッチをクリックしてdivを切り替えると、表示されているdivの代わりに隠されたdivをまだ対象としていることを前提としています。どのように修正するのですか？

ご協力いただければ幸いです。

Answer 1

最初に：これは高価な靴です！

2番目：ID値が重複しています。例：photoLarge、productThumbs、thumb01、thumb02、thumb03、thumb04。それらをそれぞれユニークにすると、おそらくより良い結果が得られます。

第3行目：$(this).attr("class","active");の行の後にアクティブなクラスを既に削除したため、最初のサムネイルをアクティブにする別の行が必要です。あなたのHTMLはアクティブな最初のサムネイルをマークしますが、それは表示される前に削除されます。