ショッピングサイトに使えそうなJqueryプラグイン「elevateZoom」

2018/03/23更新　カテゴリー：開発奮闘記　タグ: ECサイト, jQuery, プラグイン

ECサイトでよくみかけるような、マウスオーバーでの写真拡大機能を実装できるJqueryプラグイン「elevateZoom」。商品によっては使いドコロが多そうです。

マウスオーバーすると、横に拡大表示されます。
拡大2
マウスオーバーしたところだけ、虫眼鏡のように拡大されるパターンもあり。

まず、スクリプトを読み込みます。

<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevateZoom-2.5.5.min.js'></script>

<img id="zoom_01" src='images/small/拡大前.jpg' data-zoom-image="images/large/拡大後.jpg"/>

拡大前の画像と、拡大後の画像を準備して上記のように記述します。

最後に、実行するだけで適用されます。

<script>
    $('#zoom_01').elevateZoom();
</script>

なお、ウィンドウサイズなどもろもろオプションで設定してカスタマイズも可能です。

SPONSOR

PROFILE

入江慎吾
サービスで世界をよりよくするために挑戦中。個をエンパワーメントするプロダクトをつくっています。個人開発コミュニティ「入江開発室」を運営（約300名） / MENTAなど20個以上のプロダクトを開発。
（詳しいプロフィール）