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の上位互換っぽい。しばらくはこちらを試していきたいところ。
関連記事
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...