zoom.jsの導入方法と使い方をサンプルコード付き解説！
zoom.jsの導入方法と使い方をサンプルコード付き解説します。zoom.jsを用いるとシンプルなコードで、さらに画像をクリックするだけで、簡単にズームさせることができます。
非常に便利なツールなどでここで身に付けましょう。
コンテンツ [表示]
zoom.jsとは？
zoom.jsとはjQueryのプラグインです。
zoom.jsを用いるとシンプルなコードで、さらに画像をクリックするだけで、簡単にズームさせることができます。
では以下の項目でzoom.jsの導入方法と使い方を見ていきましょう。
zoom.jsの導入方法
まずは以下のサイトよりzoom.jsのデータファイル一式をダウンロードする必要があります。
そして、zoom.js以外にtransition.jsもダウンロードして読み込む必要があります。
transition.jsは下記サイトでダウンロードしてください。
最後にzoom.jsはjQueryのプラグインですので、jQuery本体を今回はCDNで読み込みます。
以下のコードをHTMLの任意の箇所に記述してください。
※ダウンロードしたzoom.js、transition.jsについては適宜パスを調整して下さい。
zoom.jsを使う準備
<link rel="stylesheet" type="text/css" href="css/zoom.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="js/zoom.js"></script>
<script src="transition.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>これでzoom.jsが使えるようになります。
zoom.jsの使い方
zoom.jsの使い方はとても簡単で、img要素にzoom.js特有のdata-action="zoom"属性を追記するのみです。
では実際にサンプルコードを用いて挙動を確認してみましょう。
画像をクリックしていただくと、画像が拡大表示されることが分かります。
このように名前の通りzoom.jsでは画像など対象の要素を拡大表示する機能があります。
まとめ
いかがでしたでしょうか？
zoom.jsを用いると、とても簡単に画像を拡大できることが分かったと思います。
ぜひzoom.jsを使ってみてください。
