是否可以在颜色框中使用 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();
}
});
来自:http ://www.jacklmoore.com/zoom/
编辑:它似乎没有额外的包装
来自:@彼得
$('a.colorbox').colorbox({
'onComplete': function(){
$('#cboxLoadedContent').zoom();
}
});
$mouseTrap.bind('click',this,function(event){
$("#zoom").trigger("click");
});
添加缩放.js
$('#zoom').colorbox();
这对我很有帮助:
.zoomImg {
height: 150% !important;
width: 150% !important;
}
打开颜色框然后调用放大onComplete
对我不起作用,因为如果您不离开图像然后重新输入图像,它不会自动开始缩放。我必须触发“鼠标悬停”事件。
当您通常缩放时,您有一个真正的大图像,并且您还需要将颜色框大小限制为窗口大小,在这种情况下,我使用了 100% x 100% 的颜色框。
颜色框的区域越大,您的鼠标在其上并且鼠标悬停未触发的可能性就越大,因为图像出现在您的鼠标指针下方,并且您的鼠标没有进入(越过)图像。
$('a.colorzoom').colorbox({ width:"100%", height:"100%", returnFocus: false, trapFocus:false,
'onComplete': function() {
$('#cboxLoadedContent').zoom({
callback: function() {
$(this).trigger('mouseover');
}
});
}
});
$(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();
}
});
});
}
});