jQuery在颜色框内缩放

有没有可能在一个色盒中使用Jack Moore的jQuery Zoom插件

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

---

我很确定你可以这样做：

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

加载zoom.js

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

---

这对我很有帮助：

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

---

打开颜色框，然后调用放大

onComplete

对我来说不起作用，因为如果不离开图像，然后重新输入图像，它不会自动启动缩放。我必须触发一个“鼠标悬停”事件

当你缩放图像时，通常你会看到一个真正的大图像，你还需要将颜色框的大小限制在窗口大小，在这种情况下，我使用了100%x100%的颜色框

颜色框的面积越大，鼠标放在上面并且鼠标盖没有启动的可能性就越大，因为图像显示在鼠标指针下，而鼠标没有进入（越过）图像

$（'a.colorzoom'）.colorbox（{width:“100%”，height:“100%”，returnFocus:false，trapFocus:false，
“onComplete”：函数（）{
$（'#cboxLoadedContent'）.zoom({
回调：函数（）{
$（this.trigger（'mouseover'）；
}
});
}
});我认为如果你让你的颜色框包含一个html文件作为一个iFrame是可以的。虽然在答案中提供代码总是好的，但是如果你可以添加一些关于代码在做什么、它如何回答问题以及它与其他答案有何不同的解释，那么对其他人来说就更有用了。
$('#zoom').colorbox(); 

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

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