画像のズームを実装する
Amazonで目にする商品にマウスカーソルが当たった際に画像が大きく拡大表示するアレ。
ECサイト構築の際の御用聞きでベンチマークとなっているサイトがAmazonである場合に結構な確率で言われる。
それ専用のプラグインも出回っているがjsで対処出来るのでメモ。
必要なjs imagezoomer
http://zoomsl.sergeland.ru/
ロシアのサイトです。
js本体のみなのでダウンロードして適当なディレクトリに設置。書いてる時のバージョンが3.0だったのでそれに沿う。
1. jsの読み込み
<script type="text/javascript" src="/hoge/fuga/zoomsl-3.0.js"></script>
至ってシンプル、ヘッダでもフッタでも管理しやすい場所に記述する。
2. イベントの実装
<script type="text/javascript"> $(function(){ $(".image-zoomer").imagezoomsl({ zoomrange: [1, 10], zoomstart:5, magnifierpos: "left", innerzoom: true, innerzoommagnifier: true }); }); </script>
3. 画像ファイルへのクラスの貼り付け
<div id="detail_image_box__item--{{ loop.index }}"><img src="{{ app.config.image_save_urlpath }}/{{ ProductImage|no_image_product }}" class="image-zoomer"/></div> </script>
imgとなる部分に今回宣言したclassを設定して終わり。
色々と選択肢はあるけど、スタイルシートや属性、クラスをアレコレと付ける必要が無い事がいちばん大きい。
ロシア語ながらサンプルも有るので動かして、ああこれがこう言う機能なんだ。と言う部分で探り探りやらなきゃいけないが
ミッションとしては画像にカーソルが当たった際にズームして欲しい。と言う部分の要件は満たしている。
これ以上に高機能な事をやりたい場合はデザインを含めて考えないといけないような気がする。
あとスマホはあまり期待しない方が良い。