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

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

拡大パターンもいろいろ

マウスオーバーすると、横に拡大表示されます。

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

導入方法

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

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

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

elevateZoom

[sc name=”engeneer”]

SHARE

• Tweet

PROFILE

入江 慎吾
イリテク株式会社代表取締役 / メンターマッチングサービスMENTAを運営（月間流通額700万突破）/ 累計20個以上のWEBサービスやアプリを開発 / CAMPFIREとコミュニティツールVoyageを共同開発中 / 「自分のサービスで生きていく」をコンセプトに個人開発オンラインサロン「入江開発室」を運営（詳しいプロフィール）