jQuery Zoom внутри цветового поля

Я почти уверен, что вы можете сделать это следующим образом:

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

Откуда: http://www.jacklmoore.com/zoom/

РЕДАКТИРОВАТЬ: кажется, работает без дополнительной обертки

От: @Peter

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

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

добавить в zoom.js

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

Это очень полезно для меня:

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

Открытие окна цвета и последующий вызов масштабирования onComplete у меня не работает, потому что оно не запускает масштабирование автоматически, если вы не покинете изображение, а затем снова войдете в него. Я должен вызвать событие "mouseover".

Когда вы масштабируете, обычно у вас есть действительно большое изображение, и вам также нужно ограничить размер цветового поля размером окна, в этом случае я использовал цветовое поле 100% x 100%.

Чем больше область цветового поля, тем больше вероятность того, что вы наведете на нее мышь, а наведение мыши не сработает, потому что изображение появляется под указателем мыши, а ваша мышь не входит (переходит) изображение.

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