ウィルスタイル株式会社 / Will Style Inc.

「PhotoSwipe.js」とは

「PhotoSwipe.js」とはVanillaJsのLightboxプラグインです。
その機能は高機能でズーム、スワイプ操作、ピンチイン・ピンチアウト、キーボード操作、全画面表示やシェアボタンまでついています。
UIもとても美しく、デスクトップでもモバイル端末でも変わらない操作感が魅力的です。

PhotoSwipe Simplify

PhotoSwipe.jsはとても高機能なのですがその導入が少し難しく、デザイナーさんやフロントエンドに詳しくない方は手軽には使えない代物となっています。
公式ドキュメントのGetting Startedページに記載されている手順どおりにやれば導入はできるのですが、それぞれ画像サイズを指定しないといけなかったり割と面倒です。
そこでPhotoSwipe.jsを簡単に導入できるようにした「PhotoSwipe Simplify」を作ってみました。
Scriptを1行書くだけでPhotoSwipe用のエレメントをDOMに追加し、[data-pswp]を指定した要素内の画像リンクをLightbox Galleryに変換します。

デモ

まずはデモをご確認ください。

インストール

npmを使用してインストールできます。

npm install photoswipe photoswipe-simplify --save

または、ページに必要なスクリプトを指定します。この時、PhotoSwipeに必要なスクリプトも同時に指定します。

<script src="path/to/photoswipe.js" charset="utf-8"></script>
<script src="path/to/photoswipe-ui-default.js" charset="utf-8"></script>
<script src="path/to/photoswipe-simplify.js" charset="utf-8"></script>

また、ページにPhotoSwipeのスタイルを指定します。

<link rel="stylesheet" href="path/to/photoswipe.min.css">
<link rel="stylesheet" href="path/to/default-skin.min.css">

使い方

使い方はとても簡単です。
ラッパー要素に[data-pswp]を指定し、その中に画像リンクを配置します。
キャプションと作者を表示する場合は、リンクにdata-caption属性とdata-author属性を指定します。

<!-- Wrapper element adding to [data-pswp] attribute. -->
<div data-pswp>
    <!-- Detect image links from internal elements and generate PhotoSwipe objects. -->
    <!-- If you want to display captions and authors, specify the data-caption and data-author attributes. -->
    <a href="test/img01.jpg" target="_blank" data-caption="Caption Here." data-author="Photo by pixabay.com"><img src="test/img01-thumb.jpg" alt=""></a>
    ...
</div>

あとはプロジェクトにphotoswipe-simplify.jsを含め、初期化するだけです。

<script charset="utf-8">
	photoswipeSimplify.init();
</script>

オプション

PhotoSwipeのオプションはほぼそのまま使用できます。
詳しくは公式のオプションページをご覧ください。
次のようにオプションを指定することができます。

photoswipeSimplify.init({
    history: false,
    focus: false,
});

さいごに

今回は制作で実際に使っているものをリファクタリングし公開してみました。
あらためて割と自分のコードが雑なのに気づきました。
可読性は本当に大事ですね。もっと精進します。
Lightboxで困ったらぜひ使ってみてください。
どうぞよしなに。