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

Question

画像を部分拡大できる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/

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

Comments

[m.ok.2nd]

丸投げと言えば、そうですが、ネットで2日程検索しましたが、希望のものが見つかりません。
やりたい事を1からすべて作成する技量はありませんので、使えるライブラリを知っている方が居れば教えて欲しいということです。

[Lhankor_Mhy]

「うまく動作しない？？？」とのことですが、当方の環境では動作しました。

[m.ts10806]

参考先の提示だけでご自身が試したコードなど工夫が伝わる内容ではないからでは。
それに「2日」など時間だけ書かれてもほぼ無意味です。試したことを具体的に書かないと。

[m.ok.2nd]

Lhankor_Mhyさん
動作したサンプルをご提供いただく事は可能ですか？

[Lhankor_Mhy]

ご提示のページのサンプルです。

[m.ok.2nd]

「ご提示のページのサンプル」というのは、そのURL内のサンプルという意味ですか？
https://shanabrian.com/web/jquery/image-zoom.php
それなら、私のブラウザでも動作します。

しかし、そこに書かれいるのを参考にテスト版を作成してみましたが、期待の動きにするのは難しそうです。

ここには書かれていませんが、
・img/image.jpgとは別にsample-image-zoom.jpgを用意する必要がありそう。
・CSSで、それぞれのdivのwidthやheightを画像に合わせて調整する必要がありそう。
などで、私の目的に使うのは難しそうだと判断しました。

[Lhankor_Mhy]

その辺りの事情を、第三者が「うまく動作しない？？？。」から読み取るのは難しいかな、と思いました。

このように回答したものを当初に提示されていなかった条件で否定されるのは、使った時間が報われないため、あまりよい感情を持たないです。
あまりよい言葉ではなくて失礼ですが、「それ、先に言ってよ……」という気分になります。
もちろん、質問者だけの問題ではなくて、不明の部分を放置して回答をした私にも問題があります。
このご質問であれば、「2つの画像、とは具体的にはなんですか」「かなり改修しないといけないとは、どのような部分を想定していますか？」「うまく動作しない、とは具体的には何が起きましたか」などと回答前にお尋ねすれば、お互いに無駄がなかっただろうと思います。

ただ、どうもteratailでは、補足依頼で条件を詳しく聞き取ることに「それぐらいわかれよ！」と拒否感を示す質問者もいらっしゃるので、つい遠慮しがちになってしまいました。
回答者の気持ちの一例としてご理解いただけると嬉しいのですが……

[m.ok.2nd]

Lhankor_Mhyさん、こんにちは。

回答では、Leaflet.js他、わざわざググっていただき情報提供ありがとうございました。

私としては、いくつか試したライブラリは、個々の理由により使うのが難しいと判断しました。ですので、それらにおいて試した事を細かく書いても意味がないかと思い省略しました。

私としては単純に私の目的にあうライブラリをご存じの方がいらっしゃれば教えていただきたいという軽い気持ちで質問しました。

もう少し状況を詳しく書くべきだったようですね。

色々と探していただくなど、お手間を取らせました。ありがとうございました。

[Lhankor_Mhy]

https://studio-key.com/719.html
↑改めてこちらを見てみましたが、ご希望にかなりあっているように見えました。
「改修」とはどういうものを想定していますか？　2つを並べることに問題がありそう、と考えてらっしゃるのですか？

[m.ok.2nd]

Lhankor_Mhyさん、こんにちは。

https://studio-key.com/719.html
↑で提供されているライブラリ「jquery.ImageExpansion.js」はライブラリ内に直接
$("#pan_image").css({
$("#image_expansion").css({
のようにID固定で書かれています。
なので、ライブラリを単純に読み込んで、IDが違うHTMLやJavaScriptを用意すれば済むというものでは無さそうです。
-----------------
<div id="image_expansion2">
<div id="pan_mouse2"></div>
<script type="text/javascript">
...
$('#image_expansion2').ImageExpansion({
...
</script>
-----------------

[Lhankor_Mhy]

そこは this で渡されてるはずので、何とでもなりそうですが……
JavaScript は苦手ですか？

[m.ok.2nd]

すみませんん。JavaScript得意というわけではありません。
> this で渡されてるはずので、何とでもなりそうですが
理解できていません。
「jquery.ImageExpansion.js」の中身をコピー＆ペーストします。ライブラリを書き換えないでそのまま使って、２つの画像に適用することはできないと思うのですが。
--------
(function ($) {
$.fn.ImageExpansion = function (options) {
var settings = $.extend({
'pan': 2,
'drag': 100
}, options);
/*
* 初期設定
*/
var setImage = function (obj) {
//画像のSRC取得
var src = $("#image_expansion img").attr('src');
//右の枠の大きさ ドラッグ枠の数値 * 倍率
var hw = settings.drag * settings.pan;
$("#pan_image").css({
'width': hw,
'height': hw
});
//右の枠へ背景画像を設定
$("#pan_image").css({
'background-image': 'url(' + src + ')'
});
//左の画像の幅を倍率で割り、max-widthに指定する幅を得る
var img_w = $("#image_expansion img").width();
img_w = Math.floor(img_w / settings.pan);
var img_h = $("#image_expansion img").height();
img_h = Math.floor(img_h / settings.pan);
//左の枠の幅を上で計算した幅と高さに設定
$("#image_expansion").css({
'width': img_w,
'height': img_h
});
//左の画像を上で計算した幅と高さに設定
$("#image_expansion img").css({
'max-width': img_w,
'height': img_h
});
//ドラッグ枠の大きさをッ設定
$("#pan_mouse").css({
'width': settings.drag,
'height': settings.drag
});
};
/*
* ドラッグ
*/
$("#pan_mouse").draggable({
containment: "parent"
});
/*
* ドラッグした距離で背景画像の位置を変更
*/
$(document).on('mousemove', '#pan_mouse', function (e) {
//image_expansion ウインド上の位置
var div = $('div#image_expansion').offset();
var ex_left = Math.floor(div.left);
var ex_top = Math.floor(div.top);
//pan_mouse ウインド上の位置
var div = $('div#pan_mouse').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").css({
'background-position': '-' + left + 'px -' + top + 'px'
});
});
return setImage($(this));
};
})(jQuery);

[m.ts10806]

完全に満たそうと思ったらどんなライブラリ選択しても自身用の改修は発生するので、結局はいざとなったら作れるくらいのスキルは必要となってきます。
要件をプラグイン基準に変更するか、改修できるくらいのスキルを身につけるか
どちらかになります。

[Lhankor_Mhy]

いや、もちろん、書き換えは必要ですが、2日もライブラリを探しているならば改修した方が早くないですか？

[Lhankor_Mhy]

もちろん強制するものではないので、「コードに手を加えるのが嫌だ」ということであれば、そのようになさって結構ですよ。

[m.ok.2nd]

私の技量で改修するとなると、image_expansion2用のものを2重に用意するような美しくないものになりそうなので、もっとシンプルで使いやすいものがあれば教えて欲しいと思って投稿しました。

どうも、期待しているようなものは無さそうなので、改修含めて検討します。

みなさん、ありがとうございました。

[m.ts10806]

プラグインといっても無償で配布されてるものはあくまで無償なので、美しいかというとそうでないものも多いですよ。
フレームワークなどの採用と同じく「基盤部分の構築をショートカットできる」くらいの認識です。
要件と期限と予算次第では存在するプラグイン基準にあわせることもなくはないです。基本設計に手を入れることにもなるので、そこらの調整は簡単ではないですが、そこはスケジュールと使える工数との天秤です。

[Lhankor_Mhy]

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

[m.ok.2nd]

Lhankor_Mhyさん

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

大感謝！！！です。

Answer 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));
  };

Comments

[m.ok.2nd]

Lhankor_Mhyさん、ありがとうございます。
Leaflet.jsと、他にわざわざググっていただいたものも一通りみさせていただきました。
私の最初の説明が不十分だったようですが、
オリジナル画像の全体像と部分拡大画像両方を並べて確認したいのです。
教えていただいたものはオリジナルの全体像を見ながらとはならないようです。

[Lhankor_Mhy]

あら、そうでしたか。
検索して出てきた中にそういうライブラリもいくつかあったのですが、条件に当てはまらないと思って排除してしまいました。

[m.ok.2nd]

Lhankor_Mhy さん、こんにちは。
私が探した限りでは、オリジナル画像の全体像と部分拡大画像両方を並べて表示できるものは多いのですが、最初に条件として挙げた「マウスを載せなくても拡大画像が表示されてたままになる」という条件を満たすものはなかなか見つかりません。

[m.ok.2nd]

改修版ありがとうございました。
https://jsfiddle.net/Lhankor_Mhy/jw91yx3p/

ベストアンサーは、この↑の改修版に対してです。

別回答にしていただいた方が、何がベストアンサーなのか分かりやすかったかと思います。

いずれにしても大感謝です。

[m.ok.2nd]

とりあえずの完成版を以下に置きました。
https://ok2nd.sakura.ne.jp/tool/photo/zoom/sample.html

[Lhankor_Mhy]

お役に立てたようで何よりです。

[m.ok.2nd]

このライブラリではオリジナルの画像サイズに合わせて、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>
---------------

[m.ok.2nd]

スクリプトを少しすっきりと書き直しました。
<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>

[m.ok.2nd]

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