web-dev-qa-db-ja.com

ズーム付きのjQueryライトボックス

ライトボックスで画像を開き、ライトボックス内でさらにズームインできるjQueryスクリプトまたはプラグインはありますか？どちらか、またはその変形を実行するスクリプトがたくさん見つかりましたが、両方を実行するスクリプトはないようです。私が望んでいたことを多かれ少なかれ実行したことがわかった唯一のオプションパッケージはajax-zoomでしたが、それはそのような単純なことにはかなり重い獣です。言うまでもなく、私の共有サーバーはそれを少し気に入らない。

jqueryimagezoompad
10
NekaraNef

誰も解決策を見つけられなかった場合に備えて、これを行う方法があります。 lightboxとelevatezoomの代わりにfancyboxを使用する必要があります。次のリンクでそれらを見つけることができます：

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で動作させる必要があります。

11
Cyrille Armanger