photoswipeをカスタマイズして、下記のようなズーム機能を付けたいです

Question

前提・実現したいこと

photoswipeをカスタマイズして、下記のようなズーム機能を付けたいです。
https://webkaru.net/jquery-plugin/zoomer/

発生している問題・エラーメッセージ

htmlの部分ですが、下記のように記述するようですが、

<div class="zoomer_wrapper zoomer_basic"> <img src="iphone6-plus.jpg" /> </div>

photoswipeの画像に当たる部分はプラグイン内で処理が行われ生成されるため、
記述自体は自分ではしていないの<img>の部分はありません。

そこで、下記のように画像の部分が生成されるので、
<img class="pswp__img" src="images/details/01_01.png">
そこへ【pswp__img2】のclass属性を付与させるjsを書きそれは成功しました。
<img class="pswp__img pswp__img2" src="images/details/01_01.png">

そして.wrap（）を使って親要素に

<div id="ZoomerDemo01" class="zoomer_wrapper"></div>を付けようとしましたが うまく行きません。 <script> document.getElementById("my-gallery2").onclick = function() { $('.pswp__img2').wrap('<div id="ZoomerDemo01" class="zoomer_wrapper"></div>'); }); ※【my-gallery2】のボタンを押したら・・・というのは、photoswipeを起動する時に、これを押すので、 これを押したら発動する・・・としたためです。 試しに、一つ上のdivにやってみたらできたので、記述が間違っているわけではなさそうです。 photoswipeから出して下記を直書きするとうまく行くので、 <img class="pswp__img pswp__img2" src="images/details/01_01.png"> photoswipeの機能の何かとバッティングしているのかもしれませんが、それが何かが分かりません。 （※その時はonclick = functionの部分は消しています。） ただ、もし上記が成功したとしても クロームのデベロッパーツールで試したのですが、 そもそも下記のように【+】【-】を押しても画像が反応しなかったので、無理なのでしょうか？ https://webkaru.net/jquery-plugin/zoomer/ photoswipeに拘っているわけではないのですが、 photoswipeのような機能プラス、何段階かに分けたズーム機能を付けたいです。 何か良いアイデアや解決策分かる方いましたら教えてください。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を提示されたほうが回答を得やすいと思います。

Answer 1

適切な回答得られませんでしたが、別の方法で解決できました。

Answer 2

公式のサンプルの時点で、画像をズームする機能が付いているようです。

【PhotoSwipe: Responsive JavaScript Image Gallery】
https://photoswipe.com/

Comments

[退会済みユーザー]

公式でついているズーム機能ではなく、何段階かに分けて付けられるズーム機能を付けたかったんです。例をあげると、lightgalleryについているようなズーム機能です。

[kei344]

lightgalleryを使えばいいのでは。

[退会済みユーザー]

lightgalleryのものを今は使っていますが、あくまで勉強的な意味でやっています。

[kei344]

PhotoSwipeなどライブラリはDOMを内部的に生成したり削除したりしているので、後から機能を追加することは「そのためのプラグインインターフェイス」が用意されていない限り難易度が高く、学習向けでは有りませんよ。

[退会済みユーザー]

そうなんですね。。。詳しく教えて頂きありがとうございます。

実はlightgalleryの方を今は使用しているのですが、それはそれで不具合が起きているので、そう言った意味でもPhotoSwipeかどちらかでできないか、と思っていました。lightgalleryで起きている不具合は、PhotoSwipeで作成したものでは起きていないので。
https://teratail.com/questions/181139

PhotoSwipe→段階別けのズーム機能が付けられたら完成
lightgallery→プルダウンのページ移動で起きている不具合が直ったら完成
上記のどちらかができれば良いな、と思っております。