为 Fancybox 添加缩放功能
我正在使用 Fancybox 作为我的缩略图库。我想使用 JQZoom ( http://www.mind-projects.it/projects/ jqzoom/ )以及 fancybox。
最终结果: 1. 用户点击缩略图 2.fancybox出现更大的图像 3. 用户可以将鼠标悬停在图像上以使用 JQZoom 放大更多
现在我已经将其设置为实现此效果。 fancybox 工作完美,但 JQZoom 根本不工作。我使用 firebug 也没有遇到任何错误。
这是页面:
http://waldondigital.com/mix/gallery.html
这是我的 jquery:
感谢您的宝贵时间,非常感谢赞赏。
I'm using Fancybox for my thumbnail gallery. I'd like to use JQZoom ( http://www.mind-projects.it/projects/jqzoom/ )with the fancybox as well.
The end result:
1. User clicks on thumbnail
2.fancybox appears with larger image
3. User can mouse over image to zoom in more using JQZoom
Right now I have it set up to do this effect. The fancybox works perfectly, but the JQZoom doesn't work at all. I haven't encountered any errors using firebug either.
Here's the page :
http://waldondigital.com/mix/gallery.html
Here's my jquery:
Thanks for your time, it's greatly appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这应该可以解决问题: http://pastebin.com/mg7e0Z1S
它基本上将缩放图像作为内容添加到 < code>$.fancybox 并在通过
onComplete
完成时应用$.jqzoom()
。我禁用了滚动,因为 jqzoom 似乎为较小的图像添加了边框,导致出现水平滚动条。
仅供参考,我只用内联缩放测试了这个......
This should do the trick: http://pastebin.com/mg7e0Z1S
It basically adds the zoom image as content to
$.fancybox
and applies$.jqzoom()
when it's done viaonComplete
.I disabled scrolling because jqzoom seems to add a border to the smaller image, resulting in horizontal scrollbars.
FYI, I only tested this with inline zoom...
您需要设置 fancybox 缩放来打开包含 JQZoom 代码的 iframe 样式灯箱。可能是一个非常巧妙的组合!
You would need to set up fancybox zoom to open an iframe style lightbox, that contained your JQZoom code. could be a very slick combination!