jquery - 带有缩放功能的 jQuery 灯箱

Question

是否有 jQuery 脚本或插件可以在灯箱中打开图像并允许您在灯箱中进一步放大？我发现有很多脚本可以做到这一点，或者它的一些变体，但似乎都没有。我发现或多或少做我想做的唯一选项包是 ajax-zoom，但对于这么简单的事情来说，这是一个相当沉重的野兽。更不用说，我的共享服务器一点也不喜欢它。

Answer 1

以防万一没有人找到解决方案，这是一种方法。您将需要使用 fancybox 而不是 lightbox 和 elevatezoom。您可以在以下链接中找到它们：

http://fancyapps.com/fancybox/#license

http://www.elevateweb.co.uk/image-zoom/download

下载后，在标题中添加不同的插件（或在正文底部以加快加载速度），您的标题应如下所示：

  <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>

在 jquery.fancybox 之后，添加以下内容：

<style type="text/css">
  .zoomContainer { z-index: 100000; }
</style>

这是一个修复，因此缩放容器出现在实际的幻想框上方。

在包装图像的链接上添加类.fancybox。

然后在不同的脚本之后添加以下内容：

    <script type="text/javascript">
     $(document).ready(function() {
      $(".fancybox").fancybox({
       afterShow: function() {
           $('.fancybox-image').elevateZoom({
             zoomType   : "lens",
             lensShape : "round",
             lensSize    : 200
           });
       }
      });
     });
    </script>

然后你应该让镜头与fancybox一起工作！

Answer 2

我遇到了同样的问题，只提出了 ajax-zoom.com

http://www.ajax-zoom.com/examples/example5.php

它做我们想要的，但它相当笨重。我正在使用 Concrete5，并且有一个名为 jqZoom Image 的附加组件，它是一个不错的简单悬停在缩放上

http://www.concrete5.org/marketplace/addons/jqzoom-image/

c5extras.com/add-ons/jqzoom

理想情况下，我想将其嵌入到标准、简单、干净的灯箱样式弹出窗口中。我已经要求 C5 社区看看是否有人愿意这样做，因为我没有所需的技能。如果我得到任何地方，我会在这里发布。

你的任务有没有到达任何地方？