2013/01/23
ECサイトで使えそうなjQueryプラグイン elevatezoom
以前
ECサイトで使えそうなjQueryプラグイン snipe.js
という記事を書いたが1ページに複数実装すると変なバグ
があったので再度別のプラグインでチャレンヂ。
今回は以前のようなバグはなく、正常に動作しました！
設置方法は以下の通り。
HTML
|
1 | <img id="demo1" src='jeff.jpg' data-zoom-image="jeff_large.jpg" /> |
デフォルト表示の画像をsrcに、拡大後の画像を data-zoom-imageに設定。
JS
|
1 2 3 | $(function(){ $('#demo1').elevateZoom(); }); |
標準だとこれだけ。
カスタマイズは以下。
|
1 2 3 4 5 | $('#i0').elevateZoom({ zoomType: "lens", lensShape: "round", lensSize: 100 }); |
zoomType: “lens” = 拡大を画像の外ではなくレンズに変更
lensShape: “round” = カーソルを丸いレンズみたいなのに変更
lensSize: 100 = レンズのサイズ
|
1 2 3 4 5 | $('#i1').elevateZoom({ zoomWindowWidth: 200, zoomWindowHeight: 200, borderSize: 0 }); |
zoomWindowWidth: 200 = ウィンドウの横幅
zoomWindowHeight: 200 = ウィンドウの縦幅
borderSize: 0 = ウィンドウのボーダー
|
1 2 3 4 | $('#i2').elevateZoom({ zoomType: "inner", cursor: "crosshair" }); |
zoomType: “inner” = デフォルトの画像自体を拡大画像のターゲットに変更
cursor: “crosshair” = カーソルを変更
・拡大のやり方が多彩
・エフェクトの種類が豊富
・バグがない
という点でとても良いプラグインと思います。
ECサイトでも使えそう
Author Profile
SHARE