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

2018.11.29 ,

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

デモ

デモサイトはこちら

ダウンロード

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

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

設定

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

css設定

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

<link rel="stylesheet" href="js/jquery.fancybox.min.css">

js設定

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.fancybox.min.js" type="text/javascript"></script>
<script src="js/masonry.pkgd.min.js" type="text/jscript"></script>
<script>
	$('[data-fancybox]').fancybox();
</script>
<script>
	$(window).load(function() {
	    $('.animals').masonry({
	    });
	});
</script>
</body>

htmlの記述

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

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

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

 <ul class="animals">
<li><a href="img/neko1.jpg" data-fancybox="animal" data-caption="猫は液体ですね"><img src="img/neko1.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
<li><a href="img/neko2.jpg" data-fancybox="animal" data-caption="綺麗なおめめですね"><img src="img/neko2.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
<li><a href="img/neko3.jpg" data-fancybox="animal" data-caption="リラックスしていますね"><img src="img/neko3.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
<li><a href="img/inu1.jpg" data-fancybox="animal" data-caption="魅惑の困り顔"><img src="img/inu1.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
<li><a href="img/inu2.jpg" data-fancybox="animal" data-caption="見返り美人"><img src="img/inu2.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
<li><a href="img/inu3.jpg" data-fancybox="animal" data-caption="もっふもふやで"><img src="img/inu3.jpg" alt="サムネイル画像" class="thumbnail" /></a></li>
</ul>

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

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

B!