Question

我尝试在this page上自定义颜色框，以便主图像显示启动颜色框，但是单击任何一个拇指只是将图像交换到主图像显示中。这工作正常，但一个琐碎的问题是最好处理索引/编号 - 因为我不希望相同的图像在灯箱图像组中出现两次，我也想要显示图像的正确索引和序列与缩略图序列对应。如果有人能够看到如何改善我现在拥有的东西那将是伟大的。

我目前拥有的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;
        });
    });

Answer 1

你可以初始化彩盒并使用“.product-gallery”的.click，就像他们在colorboxFAQ

上一样

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 if它没有未定义，那么你返回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;
        }
    });
});

on $ j（“。main-prod-img”）。点击你需要在列表项中搜索图像的索引并触发右边的“.product-gallery”点击这样的$ gallery.eq（pos ）。单击（）;
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/

jQuery自定义图库逻辑

1 个答案: