JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法
あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という見たことの無いJavaScriptライブラリが使用されていた。調べてみるとLightBox系ライブラリでスワイプに対応していたり、色々高機能みたい。以下にサンプルと利用方法をメモ。
サンプル
https://taitan916.info/sample/PhotoSwipe/
スライダー表示・個別表示が確認できる筈。
PhotoSwipe
GitHub
https://github.com/dimsemenov/photoswipe
公式サイト
CDN
CDNで使う場合は以下を記述する。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js"></script>
利用方法
ソースコード
<style> img{ width: 200px; } a{ text-decoration: none; } .gallery{ margin-bottom: 20px; } .title{ font-weight: bold; } </style> <div id="gallery_1" class="gallery"> <div class="title">スワイプ可能(スライダー表示)</div> <div class="img"> <a href="./img/001.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/001.jpg"> </a> </div> <div class="img"> <a href="./img/002.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/002.jpg"> </a> </div> <div class="img"> <a href="./img/003.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/003.jpg"> </a> </div> </div> <div id="gallery_2" class="gallery"> <div class="title">スワイプ不可(個別表示)</div> <div class="img"> <a href="./img/001.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/001.jpg"> </a> </div> <div class="img"> <a href="./img/002.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/002.jpg"> </a> </div> <div class="img"> <a href="./img/003.jpg" data-pswp-width="400" data-pswp-height="200"> <img src="./img/003.jpg"> </a> </div> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/photoswipe.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe.umd.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/5.4.4/umd/photoswipe-lightbox.umd.min.js"></script> <script> const lightbox_1 = new PhotoSwipeLightbox({ gallery: '#gallery_1', children: 'div.img', pswpModule: PhotoSwipe }); lightbox_1.init(); const lightbox_2 = new PhotoSwipeLightbox({ gallery: '#gallery_2 a', pswpModule: PhotoSwipe }); lightbox_2.init(); </script>
所感
jQuery不要且つスワイプ可能ということでLightboxの上位互換っぽい。しばらくはこちらを試していきたいところ。
関連記事
-
Lightboxで文字をクリックしたら画像を表示させる方法
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...
-
JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法
電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...
-
Ajaxでプラグイン無しのファイルアップロード方法
画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...