【Jsライブラリ】PhotoSwipeでギャラリーを制作
はじめに
どうも、NNCの石上です。
今回は、「PhotoSwipe.js」というJavascriptライブラリの紹介になります。画像のポップアップ表示ができるLightbox系のライブラリで、高機能・レスポンシブにも対応していて非常に便利です。
イメージとしてはこんな感じです。（動画内に出てくる画像は、全て石上の作品です。）
環境準備
まずは公式サイトからGitHubに飛んで、データ一式をダウンロードしましょう。zipを解凍したら、「dist」フォルダを自分の作業フォルダ内に移します。（ここでは、HTMLと同じ階層に保存したものとします）
その後、CSS/Javascriptを読み込ませるために、HTMLに以下のコードを記述してください。
<!-- CSS -->
<link rel="stylesheet" href="dist/photoswipe.css">
<link rel="stylesheet" href="dist/default-skin/default-skin.css">
<!-- Javascript -->
<script src="dist/photoswipe.min.js"></script>
<script src="dist/photoswipe-ui-default.min.js"></script>公式の手順では、この後さらに「拡大表示用HTMLコードの挿入」「PhotoSwipe初期化（実行）」の2つを行わなければならないのですが、手間がかかって面倒です。
これらの作業を単純化するために、「PhotoSwipe Simplify」というライブラリを新しく導入します。とは言っても、jsファイルを新規で一つ読み込ませるだけで済んでしまいますので、とてもお手軽です。
データをダウンロードできたら、「dist」フォルダ内に「photoswipe-simplify.min.js」というファイルを移しましょう。ファイルを移せたら、読み込ませた上で初期化（実行）の記述も加筆しておきましょう。下の2行になります。
<!-- Javascript -->
<script src="dist/photoswipe-simplify.min.js"></script>
<script>
photoswipeSimplify.init();
</script>ここまででライブラリの導入は完了しました。あとは、具体的な使い方を見ましょう。
使い方
以下がサンプルのコードになります。
ラッパー要素（ここではdiv）に「data-pswp」を記述し、その中に画像リンクを配置します。キャプションと作者を表示したい場合は、それぞれ「data-caption」「data-author」属性を追加しておきましょう。
<div data-pswp>
<ul class="p-gallery__list">
<li class="p-gallery__item">
<a href="画像へのパス" target="_blank" data-caption="画像のキャプション" data-author="画像の作者">
<img src="画像へのパス" alt="">
</a>
</li>
<li class="p-gallery__item">
<a href="img/01.png" target="_blank" data-caption="AFTERGLOW" data-author="Romanstein">
<img src="img/01.png" alt="">
</a>
</li>
</ul>
</div>以上で実装完了です。「PhotoSwipe」自体が非常に優れたライブラリであることに加え、導入を簡略化できる「PhotoSwipe Simplify」もとても便利ですね。Lightbox系ではこれを選んでおけば間違いないと思います。
