Поворот по многочисленным галереям с одним набором миниатюр - PullRequest
Новая
       5

Поворот по многочисленным галереям с одним набором миниатюр

0 голосов
/ 14 ноября 2011

Я создаю страницу товара в кассе.На странице есть образцы, которые при нажатии необходимо обновить основное изображение и соответствующие миниатюры с новым набором изображений с новым цветом.Вы можете просмотреть страницу здесь: 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, который был скрыт вместо того, который видим.Как мне это исправить.

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 15 ноября 2011

Во-первых: это дорогие туфли!

Во-вторых: у вас много идентификаторов.Например: photoLarge, productThumbs, thumb01, thumb02, thumb03, thumb04.Сделайте их уникальными, и вы, вероятно, получите лучшие результаты.

Третий: после строки $(this).attr("class","active"); вы хотите иметь еще одну строку, чтобы сделать первый эскиз активным, потому что вы уже удалили его активный класс.Ваш HTML-код отмечает первый активный эскиз, но он удаляется до того, как он будет показан.

...