PhotoSwipeの使い方(最小限の実装)

サムネイル画像をクリックすると拡大表示できるJSライブラリ「PhotoSwipe」の使い方をできるだけ簡潔にまとめてみようと思います。Light Box(ライトボックス)系のライブラリは沢山ありますが、自分はこれが一番好きかもしれません。

はじめに

PhotoSwipeの公式サイトには、3ステップで実装可能とあります。

  • JSファイルとCSSファイルを読み込む
  • 拡大表示用HTMLコードの挿入
  • PhotoSwipe初期化(実行)

しかし、3つ目の「PhotoSwipe初期化(実行)」の部分で4つの引数を渡す必要があり、初心者にはハードルが高い。

公式ではこの部分を簡単に実装するためのサンプルスクリプトが用意してあります。今回はそれを使って実装していきたいと思います。

JSファイルとCSSファイルのダウンロードと読み込み

まず、必要なファイルをダウンロードしてから、それらを読み込みます。

ダウンロード

GitHubから入手できます。「Code」というボタンからzip形式でダウンロードします。 ダウンロードしたzipを解凍し、「dist」フォルダの中身を自分の作業フォルダの中の任意の場所にコピーします。

読み込み

以下の4行をHTML内に挿入します。(リンク先は先程コピーした場所までの相対パスです)

拡大表示用HTMLコードの挿入

HTML内の</body>の直前辺りに以下のコードを挿入します。 (サムネイルをクリックした時の拡大表示用HTMLコードです)

公式のコードそのままなのでコピペでOKです。

PhotoSwipe初期化(実行)のためのスクリプトの作成と挿入

はじめに書いた3ステップ目です。

公式が用意しているサンプルスクリプトそのままです。全部コピペでOKです!

initphotoswipe.js

以上のコードを任意のファイル名で保存して、好きな場所に置いて読み込みます。

例えば、「initphotoswipe.js」というファイル名にして以下のように読み込みます。 先程ダウンロードしたファイルの読み込みよりも後に読み込んでください。

アイテムリストの書き方

上のスクリプトが正確に実行されるためには、以下のルールに従ってアイテムリストを書く必要があります。

ルール

  • 「my-gallery」というClass名のDIVタグで全体を囲います。
  • アイテムリストはそれぞれ「figure」タグで囲います。
  • 「a」タグの「data-size」属性に拡大画像の実サイズを入れます。これがないと適切に拡大表示できません。
  • キャプションが必要なければ、「figcaption」タグは省略できます。
  • それぞれのタグの構成を変えるとうまく動きません。間に別の要素などは入れない。

見本

オプション

PhotoSwipeにはさまざまなオプションが用意されています。

オプション一覧(公式)
https://photoswipe.com/documentation/options.html

オプションを反映させるためには、先程作成したスクリプト内の以下の部分に以下のように追記します。

initphotoswipe.js

上の見本では、拡大表示時の背景の透明度を指定しています。

という形式で複数指定できます。

まとめ

以上で実装できたと思います。3ステップ目のPhotoSwipeの初期化の部分で、サンプルスクリプトを使わなくても4つの引数を渡す事ができる方は、アイテムリストをルール通りに書く必要はなく、実装もとてもシンプルにできるでしょう。