勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

  JavaScript

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

 - JavaScript

  関連記事

Lightboxで文字をクリックしたら画像を表示させる方法

Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...

JavaScriptにて電子書籍や漫画ビューア用のライブラリ「ToraViewer」の利用方法

電子書籍や漫画ビューア用を設置したい。条件としてはレスポンシブ対応していること。 ...

JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法

外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...

サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法

画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...