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/

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

来自：@Peter

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

Answer 2

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

添加zoom.js

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

Answer 3

这对我很有帮助：

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

Answer 4

打开颜色框，然后调用放大onComplete对我不起作用，因为如果您不离开图像然后重新进入，则它不会自动启动缩放。我必须触发一个＆＃34; mouseover＆＃34;事件

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

颜色框的面积越大，鼠标放在它上面的可能性就越大，鼠标悬停就不会被触发，因为图像出现在鼠标指针下面，而你的鼠标没有进入（翻过去）图像。

＆＃13;

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

＆＃13;

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

jQuery缩放颜色框内

5 个答案: