jQuery缩放颜色框内

是否可以在彩盒中使用Jack Moore的jQuery Zoom插件？

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

Answer 1

我很确定你可以这样做：

 $('a.colorbox').colorbox({ 'onComplete': function(){ $('#cboxLoadedContent img').wrap('') .css('display', 'block') .parent() .zoom(); } }); 

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

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

来自：@Peter

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

Answer 2

这对我很有帮助

.zoomImg {
身高：150％！重要;
宽度：150％！重要;
}

Answer 3

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

添加zoom.js

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

Answer 4

打开颜色框，然后调用放大onComplete对我不起作用，因为如果你没有离开图像然后重新进入它，它就不会自动开始变焦。 我必须触发“鼠标hover”。 当您缩放时，您有一个真正的大图像，您还需要将颜色框大小限制为窗口大小，在这种情况下，我使用100％x 100％颜色框。

颜色框的面积越大，将鼠标放在它上面的机会越大，鼠标hover就不会被触发，因为它是鼠标底部出现的图像而不是鼠标进入（翻过）图像。

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