サイトを作るにあたってのメモ。間違ってたら後で直す。
前回のLuminousに続いてLightbox系ギャラリー『PhotoSwipe Simplify』を使ってみました。
こちらは、高機能だけど導入や設定がやや面倒なプラグイン『PhotoSwipe』が手軽に利用できる改良版となっています。
公式サイト（英語）： https://min30327.github.io/photoswipe-simplify/
製作者ブログ記事：VanillaJSの高機能Lightboxプラグイン「PhotoSwipe.js」を使いやすくしてみた
導入にあたっては上記ブログ記事が非常に簡潔かつ親切なのですが、Javascriptがよく分かっていない自分がやってみて躓いた点をカバーするよう手順をまとめてみます。
サイトをリニューアルする際、サムネイルをクリックすると拡大するタイプのギャラリープラグインを導入したくて試してみました。
Luminousには以下のようなメリットがあります。
参考資料：lightboxの超軽量版！jQuery不要の画像拡大スクリプト「Luminous」の基本的な使い方とオプションの説明、複数画像への適用方法
ここよりも基本から丁寧に解説されているので、ぶっちゃけ上記サイトを読めば十分な気もします。が、サイトには解説にないコードの組み合わせで実装したかったのでまとめておきます。
イラストをタイル状に並べた『メイソンリーレイアウト』のギャラリーを作りたかったので、軽量で簡素なMacyを導入することにしました。
公式サイト http://macyjs.com/
GitHub https://github.com/bigbite/macy.js