お世話になっております。
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がこちらになります。
javascript
1 $(function(){ 2 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>'; 3 if( $('.pswp').length=== 0 ){ 4 $('body').append(pswptag); 5 } 6 }); 7 8})(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でキャプション欄に外部サイトに飛ぶわけでない
ボタンをつけることはできるのか?
という質問にて再度立てるかもしれないです
ご教授いただけると幸いです。
回答1件
あなたの回答
tips
プレビュー