带缩放功能的jQuery灯箱 [英] jQuery lightbox with zoom

问题描述

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

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.

推荐答案

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

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:

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

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>

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

Just after the jquery.fancybox, add the following:

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

这是一个修正，因此缩放容器显示在实际的fancybox上方。

This is a fix so the zoom container appears above the actual fancybox.

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

Add the class .fancybox on the links wrapping your images.

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

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>

然后你应该让镜头使用fancybox！

You should then have the lense working with fancybox!

这篇关于带缩放功能的jQuery灯箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！