PhotoSwipe v5を使ってみる
お疲れ様です。
ライフマップ開発チームの石上です。
Webサイトにおいて画像のポップアウト表示が実装されていることは珍しくありませんし、クライアントからの要望に含まれることも多々あります。
しかし、一から実装するとなると工数もかかるし面倒…
そんな時におすすめのライブラリがPhotoSwipeです。
JavasScriptのライブラリで、豊富な機能を持ちレスポンシブにも対応している優れものです。Lightbox系のライブラリではこれが抜きんでて優秀かなと思っています。
以前のバージョンでは少し複雑な手順を踏まないと使用できなかったのですが、v5からは導入が簡易化されたようです。
この記事では、PhotoSwipeの基本的な使い方についてまとめたいと思います。
ダウンロード・環境準備
まずは公式のGitHubからデータをダウンロードしてください。（「Code」ボタンからzip形式でダウンロード可能）
ダウンロードしたフォルダから以下の3つのファイルを取り出して、使いたいページ内で読み込ませましょう（フォルダ構成は各々ご自由に！）
dist/photoswipe.css
dist/umd/photoswipe.umd.min.js
dist/umd/photoswipe-lightbox.umd.min.js
PhotoSwipeの機能を呼び出すために、一部Javascriptの記述も必要となりますので、ライブラリの読み込みの後にそちらも追加します。
ここまで踏まえて、読み込むファイル・記述は下のようになります。これで準備のほとんどが完了してしまいました。
<!-- CSS -->
<link rel="stylesheet" href="assets/css/photoswipe.css">
<!-- Javascript -->
<script src="assets/js/libs/photoswipe.umd.min.js"></script>
<script src="assets/js/libs/photoswipe-lightbox.umd.min.js"></script>
<script type="text/javascript">
var lightbox = new PhotoSwipeLightbox({
gallery: '#js-gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
</script>使い方
以下にサンプルコードを用意したので、そちらで具体的な使い方を見てみましょう（ベースとなるCSSや画像などは各々でご用意ください）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>Gallery</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/photoswipe.css">
</head>
<body>
<div class="l-wrap">
<main class="l-main">
<div>
<div class="p-gallery" id="js-gallery">
<a href="assets/images/01.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/01.jpg" alt="">
</a>
<a href="assets/images/02.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/02.jpg" alt="">
</a>
<a href="assets/images/03.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/03.jpg" alt="">
</a>
<a href="assets/images/04.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/04.jpg" alt="">
</a>
<a href="assets/images/05.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/05.jpg" alt="">
</a>
<a href="assets/images/06.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/06.jpg" alt="">
</a>
<a href="assets/images/07.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/07.jpg" alt="">
</a>
<a href="assets/images/08.jpg" class="p-gallery__item" data-pswp-width="600" data-pswp-height="600" target="_blank">
<img src="assets/images/08.jpg" alt="">
</a>
</div>
</div>
</main>
</div>
<!-- Photoswipe -->
<script src="assets/js/libs/photoswipe.umd.min.js"></script>
<script src="assets/js/libs/photoswipe-lightbox.umd.min.js"></script>
<script type="text/javascript">
var lightbox = new PhotoSwipeLightbox({
gallery: '#js-gallery',
children: 'a',
pswpModule: PhotoSwipe
});
lightbox.init();
</script>
</body>
</html>ポップアップさせたい画像（＝imgタグ）をaタグで囲むのが基本の形になります。その際、hrefには拡大後の画像のリンクを記述してください（同じでもOK）。
気をつけるべき点を2つほど共有しておきます。
aタグに属性を付与しておくこと！
aタグに対して、data-pswp-width（画像の幅）とdata-pswp-height（画像の高さ）という2つの属性を付与しておく必要があります。この記述が無いと画像が画面いっぱいに拡大表示されることになりますので、ご注意ください。
IDを一致させておくこと！
サンプルコードでは、画像を囲む要素に「js-gallery」というidを付与しています。id名を変更する場合は、script内の「gallery: '#js-gallery'; 」も連動させる必要がありますのでご注意ください。（classを利用してもOKです）
終わりに
今回はLightbox系ライブラリ「PhotoSwipe」の紹介でした。
最低限の実装でも充分便利ですが、他にも様々なオプションが用意されています。色々試してみるのも面白いですね。
https://photoswipe.com/options/
（WordPressのプラグインとしても用意されているようです！）
ではまた！
この記事が気に入ったらサポートをしてみませんか？