JavaScriptにてスワイプ可能なLightBox系ライブラリ「PhotoSwipe」の利用方法

あるサイトをWappalyzerで調査していた際に「PhotoSwipe」という見たことの無いJavaScriptライブラリが使用されていた。調べてみるとLightBox系ライブラリでスワイプに対応していたり、色々高機能みたい。以下にサンプルと利用方法をメモ。

サンプル

https://taitan916.info/sample/PhotoSwipe/

スライダー表示・個別表示が確認できる筈。

PhotoSwipe

GitHub

https://github.com/dimsemenov/photoswipe

公式サイト

https://photoswipe.com/

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の上位互換っぽい。しばらくはこちらを試していきたいところ。