画像でのマウスオーバー時、画像の一部をズームして拡大表示することが出来るjQueryプラグイン「elevatezoom.js」の使用方法をご紹介します。

導入手順

1. 1. プラグイン「elevatezoom.js」のダウンロード
      • ダウンロード先：https://github.com/elevateweb/elevatezoom
   2. 必要となるファイル
      • jquery.elevatezoom.js
   3. サンプルソース「HTML」
      画像にidセレクタを指定して、デフォルト時は実際の画像サイズより小さく表示するように設定します。
      
      XHTML

      <img id="elevatezoomSample1" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample2" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample3" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample4" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample5" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/>

      1 2 3 4 5

      <img id="elevatezoomSample1" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample2" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample3" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample4" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/> <img id="elevatezoomSample5" src="./img/image.jpg" data-zoom-image="./img/image.jpg" width="300" height="93"/>

   4. サンプルソース「jQuery」
      
      JavaScript

      jQuery(function($) { // 画像の中でズーム表示 $("#elevatezoomSample1").elevateZoom({ zoomType : "inner", cursor: "crosshair" }); // 虫眼鏡のレンズのように表示 $("#elevatezoomSample2").elevateZoom({ zoomType : "lens", lensShape : "round", lensSize : 200 }); // フェードイン、フェードアウトさせて表示 $("#elevatezoomSample3").elevateZoom({ zoomWindowFadeIn: 800, zoomWindowFadeOut: 800, lensFadeIn: 800, lensFadeOut: 800 }); // マウスホイールでズームの大きさを変更して表示 $("#elevatezoomSample4").elevateZoom({ scrollZoom : true }); // ズーム表示のサイズを変更して表示 $("#elevatezoomSample5").elevateZoom({ zoomWindowWidth: 500, zoomWindowHeight: 200 }); });

      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

      jQuery(function($) { // 画像の中でズーム表示 $("#elevatezoomSample1").elevateZoom({ zoomType : "inner", cursor: "crosshair" }); // 虫眼鏡のレンズのように表示 $("#elevatezoomSample2").elevateZoom({ zoomType : "lens", lensShape : "round", lensSize : 200 });   // フェードイン、フェードアウトさせて表示 $("#elevatezoomSample3").elevateZoom({ zoomWindowFadeIn: 800, zoomWindowFadeOut: 800, lensFadeIn: 800, lensFadeOut: 800 });   // マウスホイールでズームの大きさを変更して表示 $("#elevatezoomSample4").elevateZoom({ scrollZoom : true });   // ズーム表示のサイズを変更して表示 $("#elevatezoomSample5").elevateZoom({ zoomWindowWidth: 500, zoomWindowHeight: 200 }); });

   5. 実行サンプル
      画像の中でズーム表示

1. 2. 虫眼鏡のレンズのように表示

1. 2. フェードイン、フェードアウトさせて表示

1. 2. マウスホイールでズームの大きさを変更して表示

1. 2. ズーム表示のサイズを変更して表示