ショッピングサイトに使えそうな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

入江慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！（詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。