0

メイン画像表示がカラーボックスを起動するように、このページのカラーボックスをカスタマイズしようとしましたが、サムのいずれかをクリックすると、画像がメイン画像表示に入れ替わるだけです。これは正常に機能していますが、インデックス/番号付けを処理するのに最適な問題が 1 つあります。ライトボックスの画像グループに同じ画像を 2 回表示したくないためです。また、画像の正しいインデックスを表示して、サムネイル シーケンスに対応するシーケンス。誰かが私が今持っているものを改善する方法を見ることができれば、それは素晴らしいことです.

私が現在持っているJSは次のとおりです。

$j(document).ready(function(e) {

        function initColorbox() {
            $j(".product-gallery").colorbox({
                rel : "product-gallery",
                current : function() {
                    var currImg = $j(this).attr("href");
                    // Grab basename, as initial main image url can differ from corresponding thumb url
                    var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, '');
                    var pos;
                    var total = $j(".more-product-views li a").length;
                    // Check index by searching for filename in list items
                    $j(".more-product-views li a").each(function() {
                        if ($j(this).attr("href").indexOf(baseName) != -1) {
                            pos = $j(this).parent().index();
                        }
                    });

                    return "" + (pos + 1) + " of " + total;
                },
                onOpen : updateGallery,
                onComplete : function() {
                    $j("#cboxTitle").hide();
                }
            });
        }

        function updateGallery() {
            // Remove main product image's corresponding thumb from colorbox group to prevent duplication
            var mainProdImg = $j(".main-prod-img").attr("href");

            // Grab basename, as initial main image url can differ from corresponding thumb url
            var mainProdBaseName = mainProdImg.replace(/^.*\/|\.[^.]*$/g, '');

            $j(".more-product-views li a").each(function() {
                if ($j(this).attr("href").indexOf(mainProdBaseName) != -1) {
                    $j(this).removeClass("product-gallery");
                } else {
                    $j(this).addClass("product-gallery");
                }
            });

            // Re-init gallery
            initColorbox();
        }

        initColorbox();
        updateGallery();

        $j(".prod-more-view").click(function() {
            var imgFull = $j(this).attr("href");
            $j(".product-image a").attr("href", imgFull);
            $j(".product-image img").attr("src", imgFull);
            return false;
        });
    });
4

1 に答える 1

0

カラーボックスを初期化し、カラーボックスで行うように「.product-gallery」の.clickを使用できますよくある質問 

var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
    e.preventDefault();
    $gallery.eq(0).click();
});

「.product-gallery」をクリックしたときに「.main-prod-img」を変更し、「.main-prod-img」をクリックしたときにのみカラーボックスをトリガーするには、event.originalEvent がない場合はチェックする必要があります未定義の場合、false を返します 

var $j = jQuery.noConflict();
$j(document).ready(function(e) {
    //Create the colorbox
    var $gallery = $j(".product-gallery").colorbox({
        rel:"product-gallery",
        onComplete : function() {
            $j("#cboxTitle").hide();
        }
    });
    //open colorbox on the right image
    $j(".main-prod-img").click(function(e){
        e.preventDefault();
        var currImg = $j(this).attr("href");
        var baseName = currImg.replace(/^.*\/|\.[^.]*$/g, '');
        var pos;
        var total = $j(".more-product-views li a").length;
        $j(".more-product-views li a").each(function() {
            if ($j(this).attr("href").indexOf(baseName) != -1) {
                pos = $j(this).parent().index();
            }
        });
        $gallery.eq(pos).click();
    });
    //change .main-prod-img src if e.originalEvent is not undefined or open the color box
    $gallery.click(function(e) {
        var imgFull = $j(this).attr("href");
        $j(".product-image a").attr("href", imgFull);
        $j(".product-image img").attr("src", imgFull);
        if(e.originalEvent){
            return false;
        }
    });
});

$j(".main-prod-img").click では、リスト アイテム内の画像のインデックスを検索し、この $gallery.eq(pos).click のように右の「.product-gallery」クリックをトリガーする必要があります。 ();
HTML 

<div class="wrapper">
    <div class="product-img-box">
        <p class="product-image product-image-zoom">
            <a href="ohoopee3.jpg" class="main-prod-img"><img src="ohoopee3.jpg"></a>
        </p>
        <div class="more-views">
            <ul class="more-product-views">
                <li>
                    <a href="ohoopee3.jpg" class="prod-more-view cboxElement product-gallery"> <img src="ohoopee3.jpg" width="56" height="56"></a>
                </li>
                <li>
                    <a href="ohoopee2.jpg" class="product-gallery prod-more-view cboxElement"> <img src="ohoopee2.jpg" width="56" height="56"></a>
                </li>
                <li>
                    <a href="ohoopee1.jpg" class="product-gallery prod-more-view cboxElement"> <img src="ohoopee1.jpg" width="56" height="56"></a>
                </li>
                <li>
                <a href="marylou.jpg" class="product-gallery prod-more-view cboxElement"> <img src="marylou.jpg" width="56" height="56"></a>
                </li>
            </ul>
        </div>
    </div>
</div>

http://jsfiddle.net/bq2fW/

于 2013-07-23T15:26:58.083 に答える