jquery - jQuery 在颜色框内缩放

Question

是否可以在颜色框中使用 Jack Moore 的 jQuery Zoom 插件？

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

Answer 1

我很确定你可以这样做：

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

来自：http ://www.jacklmoore.com/zoom/

编辑：它似乎没有额外的包装

来自：@彼得

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

Answer 2

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

添加缩放.js

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

Answer 3

这对我很有帮助：

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

Answer 4

打开颜色框然后调用放大onComplete对我不起作用，因为如果您不离开图像然后重新输入图像，它不会自动开始缩放。我必须触发“鼠标悬停”事件。

当您通常缩放时，您有一个真正的大图像，并且您还需要将颜色框大小限制为窗口大小，在这种情况下，我使用了 100% x 100% 的颜色框。

颜色框的区域越大，您的鼠标在其上并且鼠标悬停未触发的可能性就越大，因为图像出现在您的鼠标指针下方，并且您的鼠标没有进入（越过）图像。

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

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