1. HOME
  2. プログラミング
  3. JavaScript
  4. PhotoSwipe v5 の使い方（最低限のコードで簡単実装）

PhotoSwipe v5 の使い方（最低限のコードで簡単実装）

目次

はじめに

以前、古いバージョンのPhotoSwipeの使い方の記事を書きました。あれからしばらく経ち、新しいバージョンのPhotoSwipeが出てたので、使い方をまとめてみます。

今度のPhotoSwipeはより簡単に設置できそうです。npmでインストールする方法が主流ですが、今回はとにかく最低限の実装で簡単に設置するために、従来通りJSとCSSファイルを読み込んで実装する方法をご紹介します。

基本的な実装

まずはJSとCSSファイルを取得します。

PhotoSwipeの公式GitHubからダウンロードします。（「Code」ボタンからzip形式をダウンロード）

https://github.com/dimsemenov/PhotoSwipe

ダウンロードしたzipファイルを解凍し、以下の３つのファイルを取り出します。

  • dist/photoswipe.css
  • dist/umd/photoswipe.umd.min.js
  • dist/umd/photoswipe-lightbox.umd.min.js

今回は「photoswipe」というフォルダを作ってその中に入れました。これらを以下のようにHTML内で読み込みます。

公式のサンプルコードを一部修正したものです。（ダミー画像が入っているのでそのままコピペで動作確認できます）

<!DOCTYPE html>
<html>

<head>
    <title>Gallery</title>
</head>

<body>

    <script src="./photoswipe/photoswipe.umd.min.js"></script>
    <script src="./photoswipe/photoswipe-lightbox.umd.min.js"></script>
    <link rel="stylesheet" href="./photoswipe/photoswipe.css">

    <div id="gallery">
        <a href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600">
            <img src="https://dummyimage.com/120x60/000/fff" />
        </a>
        <a href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200">
            <img src="https://dummyimage.com/60x60/000/fff" />
        </a>
        <a href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200">
            <img src="https://dummyimage.com/30x60/000/fff" />
        </a>
    </div>

    <script type="text/javascript">
        var lightbox = new PhotoSwipeLightbox({
            gallery: '#gallery',
            children: 'a',
            pswpModule: PhotoSwipe
        });
        lightbox.init();
    </script>

</body>

</html>

以上で実装完了です。

上のサンプルコードでは、画像リストを「gallery」というidでラップしています。id名を変更する場合は、<script>内のgallery: '#gallery',の#galleryも変更してください。classでも指定できます。

以前のバージョンのPhotoSwipeもそうでしたが、画像リストの<a>タグの、data-pswp-widthとdata-pswp-heightで画像サイズを指定しておく事が必須となっています。

より便利な実装

多くの場合、画像の縦と横のサイズをあらかじめ入れておく事はとても困難です。今回はそれを解消するコードを書いたのでご紹介します。

事前に画像の縦横サイズを取得して、data-pswp-widthとdata-pswp-heightに挿入するコードが入ってます。

<!DOCTYPE html>
<html>

<head>
    <title>Gallery</title>
</head>

<body>

    <script src="./photoswipe/photoswipe.umd.min.js"></script>
    <script src="./photoswipe/photoswipe-lightbox.umd.min.js"></script>
    <link rel="stylesheet" href="./photoswipe/photoswipe.css">

    <div id="gallery">
        <a href="https://dummyimage.com/1200x600/000/fff" data-pswp-width="" data-pswp-height="">
            <img src="https://dummyimage.com/120x60/000/fff" style="pointer-events: none" />
        </a>
        <a href="https://dummyimage.com/1200x1200/000/fff" data-pswp-width="" data-pswp-height="">
            <img src="https://dummyimage.com/60x60/000/fff" style="pointer-events: none" />
        </a>
        <a href="https://dummyimage.com/600x1200/000/fff" data-pswp-width="" data-pswp-height="">
            <img src="https://dummyimage.com/30x60/000/fff" style="pointer-events: none" />
        </a>
    </div>

    <!-- PhotoSwipe -->
    <script type="text/javascript">

        var lightbox = new PhotoSwipeLightbox({
            gallery: '#gallery',
            children: 'a',
            pswpModule: PhotoSwipe
        });
        lightbox.init();
    </script>

    <!-- 画像サイズを取得して属性に挿入 -->
    <script type="text/javascript">

        document.addEventListener('DOMContentLoaded', function () {
            const galleries = gallery.querySelectorAll('a');
            galleries.forEach((el) => {
                loadImage(el.href).then(img => {
                    el.setAttribute('data-pswp-width', img.naturalWidth);
                    el.setAttribute('data-pswp-height', img.naturalHeight);
                    el.firstElementChild.removeAttribute('style');
                });
            });
        });

        function loadImage(src) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.onload = () => resolve(img);
                img.onerror = (e) => reject(e);
                img.src = src;
            });
        }
    </script>

</body>

</html>

補足

この場合、画像サイズを取得する前にサムネイルがクリックされるとうまく動作しないので、取得するまでの間はクリックできないように、あらかじめ<img>タグにpointer-events: noneスタイルを付けています。画像サイズが取得できたら、このスタイルを外すようになってます。

まとめ

以前のバージョンに比べて、だいぶ簡単に実装できるようになってますね。PhotoSwipeにはたくさんのオプションが用意されているので、より自分好みのカスタマイズをしてみてください。

また、最近はコンパイル前提でコーディングする事が多いので、ESモジュールバージョンの実装をする場合は、公式のドキュメントをご参照ください。