サイトのイラストギャラリーではLuminous と Macyを併用しているのですがLuminousの代わりにPhotoSwipe Simplifyを使ってみたら案外すんなりとできたので手順をメモしておきます。

使用感としては、PhotoSwipe～の方が拡大機能付き＋スワイプ対応と高機能な一方、Luminousは必要なファイル数が少なく導入が簡単…といった感じです。

今後掲載していく分はPhotoSwipe Simplifyを使ってみると楽しいかも。

デモページ

前回のLuminousに続いてLightbox系ギャラリー『PhotoSwipe Simplify』を使ってみました。

こちらは、高機能だけど導入や設定がやや面倒なプラグイン『PhotoSwipe』が手軽に利用できる改良版となっています。

デモページ

公式サイト（英語）： https://min30327.github.io/photoswipe-simplify/
製作者ブログ記事：VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた

導入にあたっては上記ブログ記事が非常に簡潔かつ親切なのですが、Javascriptがよく分かっていない自分がやってみて躓いた点をカバーするよう手順をまとめてみます。

サイトをリニューアルする際、サムネイルをクリックすると拡大するタイプのギャラリープラグインを導入したくて試してみました。

デモページ

Luminousには以下のようなメリットがあります。

1. 画像下部にコメントが付けられる
2. jQuery不要で シンプルかつ軽量
3. モバイル対応

参考資料：lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法

ここよりも基本から丁寧に解説されているので、ぶっちゃけ上記サイトを読めば十分な気もします。が、サイトには解説にないコードの組み合わせで実装したかったのでまとめておきます。

イラストをタイル状に並べた『メイソンリーレイアウト』のギャラリーを作りたかったので、軽量で簡素なMacyを導入することにしました。

デモページ

公式サイト　http://macyjs.com/
GitHub　 https://github.com/bigbite/macy.js