Blog スタッフブログ

VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた

Category | Blog
/ 26,779views

こんにちは、制作の奥田です。
今期から取締役 CTOに就任しました。
就任したからといってもやる業務は大きくは変わる事はなく、引き続き魂を込めて制作していきたいと思います。

さて、VanillaJSでWebサイトやWebアプリケーションを作っておられる方で良いLightboxがなく困った方も多いのではないでしょうか?
先人達の涙ぐましい努力の甲斐もありjQueryにはLightbox系のプラグインが豊富に存在します。
ですがVanillaJSにはそれほど多くはありません。
そんな中VanillaJSで使える「PhotoSwipe.js」は非常に高機能でレスポンシブにも対応しており大変便利です。
しかし、ただJavaScriptとCSSを導入し、Scriptを数行書いて実行するだけでは使えないのが難点です。
今回は高機能な「PhotoSwipe.js」をより使いやすく拡張してみましたのでご紹介いたします。

Table of contents

  1. 「PhotoSwipe.js」とは
  2. PhotoSwipe Simplify
  3. デモ
  4. インストール
  5. 使い方
  6. オプション
  7. さいごに

「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で困ったらぜひ使ってみてください。
どうぞよしなに。

Category | Blog
Author | Mineo Okuda / 26,779views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)