前回のLuminousに続いてLightbox系ギャラリー『PhotoSwipe Simplify』を使ってみました。
こちらは、高機能だけど導入や設定がやや面倒なプラグイン『PhotoSwipe』が手軽に利用できる改良版となっています。
デモページ
公式サイト（英語）： https://min30327.github.io/photoswipe-simplify/
製作者ブログ記事：VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた
導入にあたっては上記ブログ記事が非常に簡潔かつ親切なのですが、Javascriptがよく分かっていない自分がやってみて躓いた点をカバーするよう手順をまとめてみます。
STEP 1: 必要なファイルを揃える
導入にはPhotoSwipeのCSSとJSと各種画像ファイル、そしてPhotoSwipe SimplifyのJSが必要です。
というわけでまずは、それぞれのGitHubからzipファイルをダウンロードし、必要なファイルを抜き出します。
PhotoSwipe SimplifyのGitHub…１つ
dist
L js
L photoswipe-simplify.min.js
PhotoSwipeのGitHub…計７つ
dist
L photoswipe-ui-default.min.js
L photoswipe.min.js
L photoswipe.css
L default-skin
L default-skin.css
L default-skin.png
L default-skin.svg
L preloader.gif
注意
抜き出したファイルの場所はどこでもOKですが、 default-skin.css と３つの画像ファイル default-skin.png 、 default-skin.svg 、preloader.gif は同一フォルダ内に置くようにしてください。
STEP 2: ファイルの読み込み
まずはhtmlファイルの<head>内にてPhotoSwipeのCSSを読み込みます。
<!-- PhotoSwipe CSS -->
<link rel="stylesheet" href="【photoswipe.css のURL】">
<link rel="stylesheet" href="【default-skin.css のURL】">次に<body>閉じタグの直前にてjsファイルの読み込みを行った後、初期化するコードを書けば準備完了です。（初期化ってなんだろう）
<!-- PhotoSwipe JS -->
<script src="【photoswipe.min.js のURL】" charset="utf-8"></script>
<script src="【photoswipe-ui-default.min.js のURL】" charset="utf-8"></script>
<!-- PhotoSwipe Simplify JS -->
<script src="【photoswipe-simplify.min.js のURL】" charset="utf-8"></script>
<script charset="utf-8">
photoswipeSimplify.init();
</script>STEP 3: 画像を配置する
画像を配置していきます。
参考にしたブログ記事によると『 ラッパー要素に[data-pswp]を指定し、その中に画像リンクを配置します。 』とのことですが詳しいことはよく分かりません。
<div data-pswp>
<a href="【画像１のURL】" target="_blank" data-caption="【画像１のキャプション】" data-author="【画像１の作者名】"><img src="【画像１のサムネイルのURL】" alt=""></a>
<a href="【画像２のURL】" target="_blank" data-caption="【画像２のキャプション】" data-author="【画像２の作者名】"><img src="【画像２のサムネイルのURL】" alt=""></a>
<a href="【画像３のURL】" target="_blank" data-caption="【画像３のキャプション】" data-author="【画像３の作者名】"><img src="【画像３のサムネイルのURL】" alt=""></a>
...
</div>実装は以上で完了です。一応本家のPhotoSwipeも使ってみましたが、こちらの方がソースコードが短く画像のピクセル数を入力する等の手間も省けて とっても簡単でした。
デモページをもう一度開く
オプションについて
PhotosSwipe Simply は本家PhotoSwipeのオプションがほぼそのまま使えるそうなので、使いそうなものをメモしておきます。
history
デフォルトでは画像をクリックするとURLが画像のURLに切り替わる。
（開いた画像の履歴が残ってブラウザバック時の邪魔になる…ということはないようです）
loop
デフォルト値はtrue。スワイプで画像を順番に見ていった際、最後の画像をスライドすると最初の画像に戻ります。
ループさせたくない場合はfalseに設定しましょう。ただし、画像が3枚より少ない場合はいつでもfalseになります。
preload
配列を指定することで画像ビュー時に前後の画像をプリロードしてくれる。
[1,3]の場合、前の画像を1枚と後の画像を3枚ロードします。
tapToClose
開いた画像をタップで閉じるか否か。デフォルト値はfalse。
arrowEl
前後へ移動する矢印ナビゲーションを表示させるか否か。デフォルト値はtrue。
shareEl
シェアボタンを表示させるか否か。デフォルト値はtrue。