• WEB

ネットショップで使えそう、商品画像の拡大表示 jQuery ElevateZoom

  • マイケル
    マイケル デザインちーむ
  • このエントリーをはてなブックマークに追加
虫眼鏡

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

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

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

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

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

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

elevatezoom

実装方法

最初に、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>

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

動作画像

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

zoomType: “lens” 拡大を画像の中に変更
lensShape: “round” 丸レンズに変更

<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">

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

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

このエントリーをはてなブックマークに追加

マイケルが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ