質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.78%

画像を部分拡大できるJavaScript(jQuery)ライブラリ探しています。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 212

score 5

画像を部分拡大できるJavaScript(jQuery)ライブラリ探しています。

イメージとしては下のページにあるようなタイプを探しています。マウスを載せなくても拡大画像が表示されてたままになるタイプです。
【追記】
オリジナル画像の全体像と、部分拡大画像両方を並べて確認できるタイプを探しています。オリジナル画像には拡大している部分が枠で表示されるようなものです。

https://studio-key.com/719.html
→ イメージ的にはOKだが、idやclassがライブラリ内で固定的に使われていて使いづらい。
→ 最終的にやりたい事は、2つの画像をそれぞれ拡大して比較できるツールを作成したいので、このライブラリではライブラリそのものをかなり改修しないといけない。

https://shanabrian.com/web/jquery/image-zoom.php
→ うまく動作しない???。

画像を部分拡大できるライブラリは以下のように他にもたくさんありますが、いずれもマウスhoverした時のみ拡大画像が表示され、マウスを外すと拡大画像が消えてしまいます。

https://blog.shuffleee.com/demo/jquery/elevatezoom/demo.php
https://malaman.github.io/js-image-zoom/example/
http://www.jacklmoore.com/zoom/
https://www.cssscript.com/demo/zoom-image-on-hover/

マウスを載せなくても拡大画像が表示されてたままになるタイプで、サンプルが分かりやすいものが希望です。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2021/07/17 15:43

    まあ、いちおう、簡単に改修をしてみました。
    細かいところで気に入らない部分がありますが、それは放置してあります。

    キャンセル

  • m.ok.2nd

    2021/07/17 16:34

    Lhankor_Mhyさん

    スクリプト改修版ありがとうございました。
    https://jsfiddle.net/Lhankor_Mhy/jw91yx3p/
    これで、やりたいことが実現できました。

    大感謝!!!です。

    キャンセル

  • 退会済みユーザー

    2021/07/18 23:49

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

いっそ、Leaflet.js とかはどうですか?

Leaflet.jsを使って任意の画像の拡縮を行いたい - Qiita
leaflet js 画像拡大 - Google 検索


ついでに、適当にググってみた結果を貼っておきます。

https://www.jqueryscript.net/demo/Simple-jQuery-Image-Crop-Zoom-Plugin-ZoomCrop/
https://www.jqueryscript.net/demo/jQuery-Plugin-To-Pan-An-Image-In-A-Container-simplePan/
https://www.jqueryscript.net/demo/Customizable-jQuery-Image-Zoom-Pan-Plugin-panzoom/
https://www.jqueryscript.net/demo/Simple-jQuery-Image-Zoom-With-Mouse-Wheel-or-Touch-Scroll/
https://www.jqueryscript.net/demo/SVG-Zooming-Panning-Plugin-jQuery-SvgZoom/
https://www.jqueryscript.net/demo/Touch-enabled-Image-Zooming-Panning-Plugin-jQuery-imgViewer2/
https://www.jqueryscript.net/demo/Simple-Image-Viewer-jQuery/
https://www.jqueryscript.net/demo/zoom-wheel-pan-drag-image/
https://www.jqueryscript.net/demo/smooth-pan-zoom-alotta/
https://www.npmjs.com/package/react-image-zoom-pan
https://www.cssscript.com/demo/vanilla-js-library-for-image-zoom-and-pan/
https://www.cssscript.com/demo/image-pan-lc-mouse-drag/


補足依頼欄に合わせて追記

サンプル置いておきます。

https://jsfiddle.net/Lhankor_Mhy/jw91yx3p/

  $.fn.ImageExpansion = function (options) {
    var target = $(this);
    var settings = $.extend({
      'pan': 2,
      'drag': 100
    }, options);
    /*
     * 初期設定
     */
    var setImage = function (obj) {

      //画像のSRC取得
      var src = $("img", target).attr('src');
      //右の枠の大きさ ドラッグ枠の数値 * 倍率
      var hw = settings.drag * settings.pan;
      $(".pan_image", target).css({ 'width': hw, 'height': hw });
      //右の枠へ背景画像を設定
      $(".pan_image", target).css({ 'background-image': 'url(' + src + ')' });
      //左の画像の幅を倍率で割り、max-widthに指定する幅を得る
      var img_w = $("img", target).width();
      img_w = Math.floor(img_w / settings.pan);
      var img_h = $("img", target).height();
      img_h = Math.floor(img_h / settings.pan);
      //左の枠の幅を上で計算した幅と高さに設定  
      $(target).css({ 'width': img_w, 'height': img_h });
      //左の画像を上で計算した幅と高さに設定
      $("img", target).css({ 'max-width': img_w, 'height': img_h });
      //ドラッグ枠の大きさを設定
      $(".pan_mouse", target).css({ 'width': settings.drag, 'height': settings.drag });
    };

    /*
     * ドラッグ
     */
    $(".pan_mouse", target).draggable({
      containment: "parent"
    });

    /*
     * ドラッグした距離で背景画像の位置を変更
     */
    $(".pan_mouse", target).on('mousemove', function (e) {
      //image_expansion ウインド上の位置
      var div = $(target).offset();
      var ex_left = Math.floor(div.left);
      var ex_top = Math.floor(div.top);
      //pan_mouse ウインド上の位置
      var div = $('.pan_mouse', target).offset();
      var pan_left = Math.floor(div.left);
      var pan_top = Math.floor(div.top);
      //image_expansion内におけるpan_mouseの上下位置差分
      var left = (pan_left - ex_left) * settings.pan;
      var top = (pan_top - ex_top) * settings.pan;

      $(".pan_image", target).css({ 'background-position': '-' + left + 'px -' + top + 'px' });
    });
    return setImage($(this));
  };

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2021/07/18 16:25

    このライブラリではオリジナルの画像サイズに合わせて、panとdragの数字を調整する必要があります。
    ---------------
    $('#image_expansion').ImageExpansion({
    'pan' : 2, //倍率
    'drag' : 200 //ドラッグ枠の大きさ
    });
    ---------------
    そこで、ブラウザに表示するimgのwidthを固定にして、それに合わせて自動調整できるようにライブラリをカスタマイズしようと思いましたが、私の力では結構大変そうだったので、オリジナル画像サイズからpanとdragの適度な数字を計算してから渡すようにしました。
    panとdragの数値はあくまでも私のPCで表示するサイズに合わせています。

    サンプルです。画像サイズが大きいので、少し重たいです。
    https://ok2nd.sakura.ne.jp/tool/photo/zoom/compare1.html
    https://ok2nd.sakura.ne.jp/tool/photo/zoom/compare2.html
    https://ok2nd.sakura.ne.jp/tool/photo/zoom/compare3.html

    --<ソース抜粋>---------
    <table>
    <tr>
    <td>
    <div id="image_expansion">
    <div class="pan_mouse"></div>
    <img id="img1" src="img/100-2-rx.jpg">
    <div class="pan_image"></div>
    </div>
    </td>
    <td>
    <div id="image_expansion2">
    <div class="pan_mouse"></div>
    <img id="img2" src="img/100-2-hx.jpg">
    <div class="pan_image"></div>
    </div>
    </td>
    </tr>
    </table>
    ---------------
    <script type="text/javascript">
    window.onload = function(){
    var ih_1 = document.getElementById('img1').naturalHeight;
    var ih_2 = document.getElementById('img2').naturalHeight;
    var iw_1 = document.getElementById('img1').naturalWidth;
    var iw_2 = document.getElementById('img2').naturalWidth;
    if (ih_1 > iw_1) {
    var pan1 = ih_1 / 500;
    var pan2 = ih_2 / 500;
    var drag1 = 180000 / ih_1;
    var drag2 = 180000 / ih_2;
    } else {
    var pan1 = iw_1 / 600;
    var pan2 = iw_2 / 600;
    var drag1 = 240000 / iw_1;
    var drag2 = 240000 / iw_2;
    }
    $(function() {
    $("#loading").fadeOut();
    $('#image_expansion').ImageExpansion({
    'pan' : pan1, //倍率
    'drag' : drag1 //ドラッグ枠の大きさ
    });
    $('#image_expansion2').ImageExpansion({
    'pan' : pan2, //倍率
    'drag' : drag2 //ドラッグ枠の大きさ
    });
    });
    }
    </script>
    ---------------

    キャンセル

  • 2021/07/22 15:08

    スクリプトを少しすっきりと書き直しました。
    <script type="text/javascript">
    window.onload = function() {
    image_expand('#image_expansion', 'img1');
    image_expand('#image_expansion2', 'img2');
    }
    function image_expand(div, img) {
    var ih = document.getElementById(img).naturalHeight;
    var iw = document.getElementById(img).naturalWidth;
    if (ih > iw) {
    var pan = ih / 500;
    var drag = 180000 / ih;
    } else {
    var pan = iw / 600;
    var drag = 240000 / iw;
    }
    $(function() {
    $(div).ImageExpansion({
    'pan' : pan, //倍率
    'drag' : drag //ドラッグ枠の大きさ
    });
    });
    }
    </script>

    キャンセル

  • 2021/07/22 15:57

    任意のローカルファイル(画像)をアップロードするタイプも作成してみました。
    https://ok2nd.sakura.ne.jp/tool/photo/compare/upload.html
    画像が小さいと正常動作しません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る