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

プロフィール

入江 慎吾/サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中! (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす