WEBデザイナーAkiの備忘録

「fancybox3」と「Masonry.js」で可変するおしゃれギャラリー(デモあり)

2018.11.29 ,

Lightbox系 jQuery「fancybox3」を使ってギャラリーを作ってみました。普通にflexboxでサムネイルを並べることもできますが、おしゃれに画像を並べるために「Masonry.js」を併用しています。

デモ

デモサイトはこちら

ダウンロード

ひとまず「fancybox3の配布元」からfancybox3一式をダウンロードします。
※fancybox3は個人利用はフリーですが、商用利用は有料なのでご注意ください。

次に画像を並べるため「Masonryの配布元」からMasonry一式をダウンロードします。

設定

ダウンロードしてきた「fancybox3」と「Masonry.js」を展開し、設置したいフォルダに入れていきます。

css設定

まずはfancybox3のcss設定をhead内に読み込みます。

js設定

bodyの閉じタグの直前でないとしっかり動かないので、jsは全てこちらに。
masonryで使用するクラスは任意のものにしてください。今回は「.animals」というクラス名にしています。

htmlの記述

「.animals」をulにつけました。今回はリストを使っていますが、こんな感じで、画像を囲む要素にクラスをつけるだけで、masonryでタイルのように並べてくれます。

「class=”thumbnail”」はこちらでつけたクラスですが、横幅を決めているだけです。このサムネイルは230pxにしてますね。そうすると画像サイズが違っても、とりあえず横幅だけは同じサイズで綺麗に並べてくれる感じです。勿論、異なる横幅のパターンの別のクラスをつけたりすることもできますね。

また、fancyboxお馴染みのグループ化「data-fancybox=”グループ名”」で、一つのグループとして画像遷移できます。

これで画面サイズに応じてしゅるしゅる動くタイル状のギャラリーができました!

fancybox3には色々オプションもあるので、それらを活用するのもいいですね。

コメント