通过一组缩略图旋转多个画廊

Question

我正在创建结帐中的产品页面。该页面有样本，当点击需要更新主图像和相应的缩略图与一组新的图像与新的颜色。您可以在这里查看页面:http://www.briansugden.com/ai/tron.html un/pw is 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是隐藏的，而不是一个可见的。我该如何解决这个问题?

任何帮助将非常感激!

Answer 1

第一:这些鞋真贵!

第二:你有很多重复的ID值。例如:photolage, productThumbs, thumb01, thumb02, thumb03, thumb04。让每一个都独一无二，你可能会得到更好的结果。

第三:在$(this).attr("class","active");行之后，您想要另一行使第一个缩略图激活，因为您已经删除了它的活动类。您的HTML将第一个缩略图标记为活动，但在显示之前将其删除。