「fancybox3」と「Masonry.js」で可変するおしゃれギャラリー（デモあり）
Lightbox系 jQuery「fancybox3」を使ってギャラリーを作ってみました。普通にflexboxでサムネイルを並べることもできますが、おしゃれに画像を並べるために「Masonry.js」を併用しています。
デモ
ダウンロード
ひとまず「fancybox3の配布元」からfancybox3一式をダウンロードします。
※fancybox3は個人利用はフリーですが、商用利用は有料なのでご注意ください。
次に画像を並べるため「Masonryの配布元」からMasonry一式をダウンロードします。
設定
ダウンロードしてきた「fancybox3」と「Masonry.js」を展開し、設置したいフォルダに入れていきます。
css設定
まずはfancybox3のcss設定をhead内に読み込みます。
|
1 |
<link rel="stylesheet" href="js/jquery.fancybox.min.css"> |
js設定
bodyの閉じタグの直前でないとしっかり動かないので、jsは全てこちらに。
masonryで使用するクラスは任意のものにしてください。今回は「.animals」というクラス名にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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=”グループ名”」で、一つのグループとして画像遷移できます。
|
1 2 3 4 5 6 7 8 |
<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には色々オプションもあるので、それらを活用するのもいいですね。