带缩放功能的 jQuery 灯箱
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8786885/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery lightbox with zoom
提问by NekaraNef
Is there a jQuery script or plugin that opens images in a lightbox and allows you to zoom in further within the lightbox? I have found PLENTY of scripts that do either, or some variant of it, but none seem to do both. The only option package I found that more or less did what I wanted to was ajax-zoom, but that's a rather heavy beast for such a simple thing. Not to mention, my shared server doesn't like it one bit.
是否有 jQuery 脚本或插件可以在灯箱中打开图像并允许您在灯箱内进一步放大？我发现有很多脚本可以做到这两者，或者它的一些变体，但似乎没有一个可以同时做到。我发现或多或少做了我想做的唯一选项包是ajax-zoom，但对于这么简单的事情来说，这是一个相当沉重的野兽。更不用说，我的共享服务器一点也不喜欢它。
回答by Cyrille Armanger
Just in case no-one found the solution, here is a way to do it. You will need to use fancybox instead of lightbox and elevatezoom. You can find them at the following links:
以防万一没有人找到解决方案，这里有一种方法。您将需要使用fancybox 而不是lightbox 和elevatezoom。您可以在以下链接中找到它们：
http://fancyapps.com/fancybox/#license
http://fancyapps.com/fancybox/#license
http://www.elevateweb.co.uk/image-zoom/download
http://www.elevateweb.co.uk/image-zoom/download
Once you have downloaded this, add the different plugins in the header (or at the bottom of the body for a faster loading), your header should look like this:
下载后，在标题中添加不同的插件（或在正文底部以加快加载速度），您的标题应如下所示：
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/jquery.elevateZoom-3.0.8.min.js"></script>
Just after the jquery.fancybox, add the following:
在 jquery.fancybox 之后，添加以下内容：
<style type="text/css">
.zoomContainer { z-index: 100000; }
</style>
This is a fix so the zoom container appears above the actual fancybox.
这是一个修复，因此缩放容器出现在实际的花式框上方。
Add the class .fancyboxon the links wrapping your images.
.fancybox在包装图像的链接上添加类。
Then add the following after the different scripts:
然后在不同的脚本之后添加以下内容：
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
afterShow: function() {
$('.fancybox-image').elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 200
});
}
});
});
</script>
You should then have the lense working with fancybox!
然后你应该让镜头与fancybox一起工作！
回答by Kevin Barton
I'm having the same problem and have only come up with ajax-zoom.com
我遇到了同样的问题，并且只想出了 ajax-zoom.com
http://www.ajax-zoom.com/examples/example5.php
http://www.ajax-zoom.com/examples/example5.php
It does what we want, but it's rather clunky. I'm using Concrete5 and there's an add-on called jqZoom Image which is a nice simple hover over zoom
它做我们想要的，但它相当笨重。我正在使用 Concrete5 并且有一个名为 jqZoom Image 的附加组件，它是一个很好的简单悬停在缩放上
http://www.concrete5.org/marketplace/addons/jqzoom-image/
http://www.concrete5.org/marketplace/addons/jqzoom-image/
c5extras.com/add-ons/jqzoom
c5extras.com/add-ons/jqzoom
Ideally I would like to embed this into a standard, simple, clean lightbox style pop-up. I've asked the C5 community to see if anyone is up for doing this as I don't have the skills required. If I get anywhere I'll post here.
理想情况下，我想将其嵌入到标准、简单、干净的灯箱样式弹出窗口中。我已经要求 C5 社区看看是否有人愿意这样做，因为我没有所需的技能。如果我到达任何地方，我会在这里发布。
Did you get anywhere with your quest?
你的追求有没有到任何地方？
