2012-01-09 144 views
10

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

回答

-1

我有同样的问题,只拿出ajax-zoom.com

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

它做我们想要的,但它是非常笨拙。我使用Concrete5并有一个附加的所谓jqZoom图片是在变焦一个不错的简单悬停

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

c5extras.com/add-ons/jqzoom

理想我想嵌入这成一个标准,简单,干净的灯箱样式弹出。我已经要求C5社区看看是否有人会这样做,因为我没有所需的技能。如果我得到任何地方,我会在这里发布。

你有没有得到任何地方与你的追求?

11

为防万一没有人找到解决方案,这里有一个办法。你将需要使用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工作!