jQuery Zoom inside a colorbox

Question

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'});
});

Answer 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();
    }
});

Answer 2

This is very helpful for me:

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

Answer 3

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');
            }
        });
        
    }
});

Answer 4

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

add in zoom.js

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

Answer 5

    $(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();
                    }
                });
        });
    }
    });