0

I've tried to customise colorbox on this page so that the main image display launches colorbox, but clicking any of the thumbs just swaps the image into the main image display. This is working fine but one niggling issue is best to handle the indexing/numbering - as I don't want the same image to appear twice in the lightbox image group, and I also want the correct index of the image to show and for the sequence to correspond with the thumbnail sequence. If anyone could see how to improve what I have at the moment that would be great.

The JS I currently have is:

$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

you can init the colorbox and use the .click of the ".product-gallery" like they do on the colorboxFAQ 

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

to change the ".main-prod-img" when you click on the ".product-gallery" and only trigger the colorbox when click on ".main-prod-img" you need to check for event.originalEvent if it is not undefined then you return 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").click you need to search for the index of the image in list items and trigger the right ".product-gallery" click like this $gallery.eq(pos).click();
the 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 回答