jquery3.3.1でのモーダル画像にプラスマイナスボタンをつけて拡大縮小を行いたい


プログラミング初心者です。  
モーダルの画像にプラスマイナスのボタンをつけて拡大縮小したいです。  
調べたところviewer.jsなどのプラグインを導入するとできそうなのですがやり方がわかりません。  
教えていただける方いましたら  
よろしくお願いいたします。  
jquery3.3.1

[html]

[code]

    <div>
    <img class="img-thumbnail" src="ThumbnailUri" data-path="OriginalUri" data-toggle="modal" data-target="#image-modal" id="image-x-y" data-rotate="Lotate" style="cursor: pointer;"/>
    </div>
    
    
    <div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-middle" id="modal-style">
               
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="" alt="" class="img-responsive center-block" id="modal-photo-box" />
                        <input type="hidden" name="org-width" id="org-width" value="" />
                        <input type="hidden" name="org-height" id="org-height" value="" />
                    </div>
                </div>
            </div>
        </div>
    
[/code]

[jquery]

[code]

    $(".container").on('click', '#image-modal', function (event) { })
            .on('show.bs.modal', function (event) {
                var target = event.relatedTarget.id;
    
                var rotate = $('#' + target).attr('data-rotate');
                if (rotate === "0") {
                    $("#modal-style").attr("style", "width:1000px;");
                } else {
                    $("#modal-style").removeAttr("style");
                }
    
                var val = $('#' + target).attr('data-path');
    
                if (val === "") return false;
    
                $("#modal-photo-box").attr('src', val);
    
                         
            }).on('hidden.bs.modal.bs.modal', function (event) {
                $("#modal-photo-box").attr('src', "");
            });
    
[/code]

