jQuery Zoom inside a colorbox

问题:

Is it possible to use the jQuery Zoom plugin from Jack Moore inside a colorbox?

$(document).ready(function(){
  $('a.photo').zoom({url: 'photo-big.jpg'});
});

回答1:

I'm pretty sure you can do this this way :

$('a.colorbox').colorbox({
    'onComplete': function(){ 
        $('#cboxLoadedContent img').wrap('<span style="display:inline-block"></span>')
            .css('display', 'block')
            .parent()
            .zoom();
    }
});

From : http://www.jacklmoore.com/zoom/

EDIT : It seems to works without the extra wrap

From : @Peter

$('a.colorbox').colorbox({
    'onComplete': function(){ 
        $('#cboxLoadedContent').zoom();
    }
});

回答2:

$mouseTrap.bind('click',this,function(event){
     $("#zoom").trigger("click");
});

add in zoom.js

$('#zoom').colorbox(); 

回答3:

    $(document).ready(function(){
    function callPreviewLightbox(urlPath) {
        $(document).ready(function () {
                $.colorbox({
                    href: urlPath,
                    width: '100%',
                    top: '0%',
                    height: '100%',
                    onClosed: function () {
                        alert('on close');
                    },
                    onOpen: function () {

                    },
                    onComplete: function () {
                        $('#cboxLoadedContent').zoom();
                    }
                });
        });
    }
    });

回答4:

This is very helpful for me:

.zoomImg {
    height: 150% !important;
    width: 150% !important;
}

回答5:

Opening the colorbox and then calling the zoom in onComplete does not work for me because it doesn't start the zoom automatically if you do not leave the image and then reenter on it. I have to trigger a "mouseover" event.

When you zoom typically you have a real big image and you also need to limit the colorbox size to the window size, in that case I used a 100% x 100% colorbox.

The bigger the area of the colorbox is, the greater the chance is that you have your mouse on it and the mouseover is not fired because the image is appearing under your mouse pointer, and your mouse is not entering (going over) the image.

$('a.colorzoom').colorbox({ width:"100%", height:"100%", returnFocus: false, trapFocus:false, 
    'onComplete': function() { 
        $('#cboxLoadedContent').zoom({
            callback: function() {
                $(this).trigger('mouseover');
            }
        });
        
    }
});