jQuery 在颜色框内缩放答案

【问题标题】：jQuery Zoom inside a colorboxjQuery 在颜色框内缩放
【发布时间】：2013-03-11 07:59:02
【问题描述】：

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

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

【问题讨论】：

如果你让你的颜色框包含一个 html 文件作为 iframe，我认为是的

标签： jquery plugins zooming colorbox

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

这对我很有帮助：

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

【讨论】：

【解决方案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】：

我很确定你可以这样做：

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

【讨论】：

【解决方案5】：

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

添加 zoom.js

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

【讨论】：