带缩放功能的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上方.

.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 社区询问是否有人愿意这样做，因为我不具备所需的技能。如果我到达任何地方，我会在这里发帖。

你的追求有进展吗？