【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系ではこれを選んでおけば間違いないと思います。

RECENT ENTRIES

  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE
  • 【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう

    VIEW MORE
  • 【ウェブ解析】ブルー・オーシャン戦略に必要なフレームワーク

    VIEW MORE

CONTACT

contact