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

2018/03/23更新 カテゴリー:開発奮闘記 タグ: , ,
  • このエントリーをはてなブックマークに追加

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

SPONSOR

拡大パターンもいろいろ

拡大
マウスオーバーすると、横に拡大表示されます。
拡大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>

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

elevateZoom

フリーランスエンジニアの稼ぎ方

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

PROFILE

プロフィール

入江 慎吾/サービス開発だけで生きていく
15年続けた受託開発をやめ、自分が作ったサービスだけで生きていくことを決意。同じゴールを目指す仲間が集まる入江開発室を運営 / 師弟関係がつくれるサービス「MENTA」をつくりました。
(詳しいプロフィール)

PRODUCT

イリテクで開発したプロダクト

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす