Blog

ECサイトで使えそうなjQueryプラグイン elevatezoom

2013.01.23Cat:EC jQueryプラグイン 役員

以前

ECサイトで使えそうなjQueryプラグイン snipe.js

 

という記事を書いたが1ページに複数実装すると変なバグ

http://sterfield.co.jp/demo/hoshino/24/ec.html

 

があったので再度別のプラグインでチャレンヂ。

 

デモ

 

今回は以前のようなバグはなく、正常に動作しました!

 

デモ

 

設置方法は以下の通り。

 

HTML

デフォルト表示の画像をsrcに、拡大後の画像を data-zoom-imageに設定。

 

JS

 

標準だとこれだけ。

カスタマイズは以下。

 

 

zoomType: “lens” = 拡大を画像の外ではなくレンズに変更

lensShape: “round” = カーソルを丸いレンズみたいなのに変更

lensSize: 100 = レンズのサイズ

 

zoomWindowWidth: 200 = ウィンドウの横幅

zoomWindowHeight: 200 = ウィンドウの縦幅

borderSize: 0 = ウィンドウのボーダー

 

 

zoomType: “inner” = デフォルトの画像自体を拡大画像のターゲットに変更

cursor: “crosshair” = カーソルを変更

 

・拡大のやり方が多彩

・エフェクトの種類が豊富

・バグがない

という点でとても良いプラグインと思います。

ECサイトでも使えそう

Author Profile

hoshino
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ