imgViewer2.jsを使って画像の拡大縮小機能を実装する【マウスホイール・拡縮ボタン】

: ひぐま

2021.12.06

JavaScript

今回は画像を拡大縮小するボタンの実装、また、マウスホイールでの拡縮やレスポンシブでの拡縮も可能にする便利なプラグイン「imgViewer2.js」をご紹介します。

画像を拡大するプラグインはほかにもありますが、拡縮ボタンとマウスホイールでの拡縮を備えることのできるものにはなかなか巡り合えず彷徨っていた頃、このプラグインで助けられました。

まずはこちらのデモをご覧ください。

「+」ボタンアイコンで画像を拡大、「-」ボタンで縮小ができるほか、拡大した状態でドラッグすると移動ができます。

スマホでは指でピンチイン・ピンチアウトも可能です。

デモのような実装は意外と簡単ですので、早速実装してみましょう。

用意するファイル

まずは下記より必要なファイルをダウンロードします。
imgViewer2のページの「src」フォルダから、「imgViewer2.js」をダウンロードします。
次に拡大縮小ボタンを設置するために
leafletのページのDownloadメニューから「leaflet.js」と「leaflet.css」をダウンロードします。
最後にjQueryUIのページより、「jquery-ui.min.js」をダウンロードします。
※jQueryをダウンロードされていない場合はそちらもダウンロードしておいてください。jQueryのページ

HTML

<main>
   <p><img id="zoomImg" src="img/sample.jpg" alt="富士山"></p>
</main>

拡縮したいimgに任意のIDをつけてあげればOKです。

スクリプト

<link rel="stylesheet" href="css/leaflet.css">
<script src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<script type="text/javascript" src="js/imgViewer2.js"></script>
<script type="text/javascript">
    ;(function($) {
         $(window).on("load", function() {
             //imgのIDやクラスを指定
             var $img = $("#zoomImg").imgViewer2(
                     {
                     //画像の揺れの改善
                     onReady: function() {
                         this.setZoom(2);
                         this.setZoom(1);
                     }
                 }
             );
         });
    })(jQuery);
</script>

※ファイルのパスはご自身で使われるファイルの階層に合わせてください。

12行目以降の記述は特定条件で発生する画像の横揺れを出さないようにするためのものです。
(解決してくださった方、情報を載せてくださった方にお礼申し上げます。※後述)

CSS

main > p{ width:800px; }
/*以下はタブレット以下のサイズ用*/
@media screen and (min-width:0px) and (max-width: 1023px){
   main > p{ width:100%; height:600px; }
   main > p img{ height:100%; }
}