【photoswipe.js】タップした際に、画像がズームするのを防ぐことが可能かどうか

Question

お世話になっております。

photoswipeを使用したLightBoxを作成しております。

PhotoSwipeの使い方！Light Boxの決定版を導入しよう！
↑等を参考にしつつ、カスタマイズしながら作成しております。

この度聞きたいのは、
このプラグインを使用しながら、スライドの機能は残したまま、
画面をタッチした際に画像がズームしてしまうのを防ぐことができるかどうか
という点です。

###詳細

現在作っておりますのが、下記イメージのようなphotoswipeを使ったlightboxです。

480×620の箇所には、サイズのランダムな画像が入ります。

デフォルトのphotoswipeとほぼ機能は変わらないのですが、
キャプション部分に<a>タグで、ボタンを追加しました。

クリックに問題はないのですが、
ボタンをタップしますと、イメージ画像でいう480×620の画像がズームされてしまいます。
（※↓下記のデモをスマホで見た際に、右下をタップした時と同じような動作)
サンプルデモ

これを、ボタンはクリックできてかつ、タップした際には画像がズームしないように…
という使用は実装が可能でしょうか？
###ソース
jsをすべて乗せるとteratailの文字数制限に引っかかったため、
photoswipeが形成されているタグのみ掲載します。。。インデント等なく見づらいですが、
ほぼ下記参考サイトのjsと同じです。

https://syncer.jp/how-to-use-photoswipe/demo/photoswipe-customize.html

photoswipeの実装されているjsがこちらになります。

    $(function(){
        var pswptag = '<div class="pswp gallery_list" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"></div><div class="pswp__scroll-wrap"><div class="pswp__container"><div class="pswp__item" aria-hidden="true"></div><div class="pswp__item" aria-hidden="true"></div><div class="pswp__item" aria-hidden="true"></div></div><div class="pswp__ui pswp__ui--hidden"><div class="pswp__top-bar"><div class="pswp__counter"></div><button class="pswp__button pswp__button--close" title="Close (Esc)"></button><button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button><button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button><div class="pswp__preloader"><div class="pswp__preloader__icn"><div class="pswp__preloader__cut"><div class="pswp__preloader__donut"></div></div></div></div></div><div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><div class="pswp__share-tooltip"></div></div><button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button><button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button><div class="pswp__caption"><div class="pswp__caption__center fl_inner"></div><a class="btn fl_inner pswp--touch"></a></div></div></div></div>';
        if( $('.pswp').length===  0 ){
            $('body').append(pswptag);
        }
    });
    
})(jQuery);

###試したこと

<div class="pswp__caption"><div class="pswp__caption__center fl_inner"></div><a class="btn fl_inner pswp--touch"></a></div>

Chromeのデベロッパーツールにて、
.pswp__captionが.pswp__scroll-wrapの外に出ていれば
希望の動作をすることを確認しましたので、

上記、ソースのdivの位置を変更しましたが、
photoswipe自体が動作しなくなってしまいました。。

また、もう一点、いくつかオプションの変更も試しましたが、
タッチ自体が効かなくなったり、スライドが効かなくなったりしてしまいました。

---

根本的にやりたい動作ができたというわけではないのですが、
<a href=""></a>でボタンを作成していたがために、
photoswipeが動作してズームのような動きになっていたことがわかりました。

ただ、aタグ以外で作成すると今度は
クリックが反応しず…

そもそもphotoswipeでキャプション欄に外部サイトに飛ぶわけでない
ボタンをつけることはできるのか？
という質問にて再度立てるかもしれないです

---

ご教授いただけると幸いです。

Comments

[kei344]

photoswipeの設定とクリック処理も文字数オーバーになりますか？リンク先の「photoswipeの設定」はそう長いようにも感じませんが、足りませんか？

Answer 1

すみません やはりあからさまに情報足りてなかったです。。

あと指摘いただいた件については、日本語が足りず、
photoswipeが形成されているタグが参考サイトとほぼ同じ、と言うだけで、
他の設定部分に関してはかなり記述を変えたりしており、そのため文字数に引っかかった様でした…
ただ、kei344様の指摘通り、クリック処理については問題なくアップできましたので、
よく分割してから質問すべきでした。

---

質問の結論としてはボタンの作成が可能でした。

動作しなかったのは、
掲載していなかったボタンのクリック処理のjsに原因があり、

$('.btn').on('click',function() {
と言う記述にしていたがため、iphoneで反応しなかったと言う単純なものでした。。

$('.btn').on('click touchend',function() {

と言う記述に変更し、動作致しました。

						$('.btn').on('click touchend',function() {
						var num = parseInt($(this).text(), 10);

						if($(this).hasClass(d_txt)){
						num--;
						$(this).removeClass(d_txt);
						} else {
						num ++;
						$(this).addClass(d_txt);     
						}
					$(n_tgt).text(num);
					});