こんにちわ、マイケルです。

インターネットでショッピングしたりする方は見たことあるかもしれません。
マウスを商品画像の上に持っていくと、画像が部分的に拡大表示するのありますよね。
そう、アレです(b≧∀)

本日は、そのような商品画像の拡大表示できる「ElevateZoom」jQueryプラグインを紹介したいと思います。

必要ファイルをダウンロード

elevateZoomのサイトから、ファイルをダウンロードします。

ダウンロードしたファイルに、jquery.elevatezoom.jsがありますので、こちらを使用します。

実装方法

最初に、jqueryとjquery.elevatezoom.jsを読込みます。

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.elevatezoom.js" type="text/javascript"></script>

お次に画像の設置です。
「src=”画像パス”」には通常の表示する為の画像のパスを、「data-zoom-image=”画像パス”」には拡大する為の高解像度画像のパスを設定します。

<img id="demo1" src="img/photo_s.jpg" data-zoom-image="img/photo.jpg">

そして、実際に画像拡大機能を設定/実行するコードの記述

 <script>
      $("#demo1").elevateZoom();
 </script>

これで、以下のような感じに画像上にをマウスを持ってくと拡大表示になります。

オプションも指定することが出来ます。

<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.elevatezoom.js" type="text/javascript"></script>
<script>
      $("#demo1").elevateZoom({
      zoomType: "lens",
      lensShape: "round"
      });
</script>

<img id="demo1" src="img/photo_s.jpg" data-zoom-image="img/photo.jpg">

他にも細かくオプションを決めることができるので、興味がある方は確認してみてください。

こんな感じで、ちょっとした設定で実装できますので、ネットショップ等で細部までにこだわった商品などをアピールする場合に使えば効果的だと思います。
ぜひ機会があれば試してみてください。