【zoomsl】画像を拡大ズームさせる

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

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

そんなときは「zoomsl」を使うと便利です。

使い方もとても簡単です。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

zoomslの使い方

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

下記のサイトを参考にしました。

Attention Required! | Cloudflare

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>

以上です。

未経験でも安心!人気のプログラミングスクール

マンツーマン指導だから未経験からプログラミングが学べて高いコーディングスキルが身につく人気のテックキャンプ!

jQuery
スポンサーリンク
blogをフォローする
フロントエンジニア&コーダーのためのマテリアルブログ

コメント

タイトルとURLをコピーしました