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社区看看是否有人这样做，因为我没有所需的技能。如果我到达任何地方，我会在这里发布。

你的任务是否随处可见？

带缩放功能的jQuery灯箱

2 个答案: