勉強したことのメモ

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

  関連記事

「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法

「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...

javascriptで画像を取り扱う際の注意

javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...

バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法

画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...

Chart.jsで描写したグラフを画像としてダウンロードさせる方法

サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...