画像を拡大させてみせたいときってありますよね。
たとえば商品画像にマウスが乗ったら拡大させたい!
アマゾンの商品ページでも使われていますね。
画像をズームさせたいときは「zoomsl」を使うと便利です。
使い方や書き方もシンプルなので導入も楽です。
zoomslの使い方
まずは拡大させるためには必要なファイルを準備しましょう。
下記のサイトを参考にさせてもらいました。
Just a moment...
html
まずはhead内に「zoomsl-3.0.min.js」を読み込みます。
<script type="text/javascript" src="zoomsl-3.0.min.js"></script>
次に拡大させるimgタグを記述します。
<img src="img.jpg" class="img-zoomer">
js
<script type="text/javascript">
jQuery(function(){
jQuery(".img-zoomer").imagezoomsl({
zoomrange: [1, 7],
});
});
</script>
画像が透過されたものだと拡大する
拡大させたい画像の背景が透過されている画像だとズームの下が透けて見れることがあります。
jpg画像を使っていたら問題ないですがpngとかで透過している画像を使っている起こります。
そんなときは下記のスタイルを追加しましょう。
.magnifier{background: #fff;}
コメント