【zoomsl】プラグインを使って画像を拡大ズームさせる方法

画像を拡大させてみせたいときってありますよね。

たとえば商品画像にマウスが乗ったら拡大させたい！

アマゾンの商品ページでも使われていますね。

画像をズームさせたいときは「zoomsl」を使うと便利です。

使い方や書き方もシンプルなので導入も楽です。

zoomslの使い方

まずは拡大させるためには必要なファイルを準備しましょう。

下記のサイトを参考にさせてもらいました。

Just a moment...

codepen.io

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;}

サンプル