jQuery燈箱縮放

Question

是否有一個jQuery腳本或插件，在Lightbox中打開圖像，並允許您在燈箱內進一步放大？我發現了PLENTY腳本，或者是它的一些變體，但似乎都沒有。唯一的選擇包我發現或多或少做了我想要的是ajax-zoom，但對於這麼簡單的事情來說，這是一個相當沉重的野獸。更不用說，我的共享服務器並不喜歡它。

Answer 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社區看看是否有人會這樣做，因爲我沒有所需的技能。如果我得到任何地方，我會在這裏發佈。

你有沒有得到任何地方與你的追求？

Answer 2

爲防萬一沒有人找到解決方案，這裏有一個辦法。你將需要使用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工作！