HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<link rel="stylesheet" type="text/css" href="css/6-2-2.css">body内のギャラリーを表示させたい場所にHTMLを記載します。
ボタンの<li>についたクラス名と、画像を内包する<li>のクラス名が一致した要素を表示させます。
<ul class="sort-btn">
<li class="sort00 active">全て</li><!--はじめに「全て」ボタンに現在地表示をつけるためactive というクラス名を付与-->
<li class="sort01">グループ1</li>
<li class="sort02">グループ2</li>
<li class="sort03">グループ3</li>
</ul>
<ul class="grid"><!--1番外側のタグにgrid というクラス名を付与。-->
<li class="item sort01"><!--li には、item というクラス名と並び替え基準となるクラス名（ボタンのクラス名と同じ名前）を付与。-->
<div class="item-content"><!--内側のdivには高さを維持するためにitem-contentというクラス名をつける。-->
<a href="img/01.jpg" data-fancybox="group1" data-caption="グループ1キャプション"><img src="img/01.jpg" alt=""></a><!--複数画像をグループ化してサムネ
イル表示させたい場合は、datafancybox="半角英数字で同一のグループ名"、キャプションを入れたい場合はdata-caption="キャプションタイトル"を設定する。-->
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="img/02.jpg" data-fancybox="group2" data-caption="グループ2キャプション"><img src="img/02.jpg" alt=""></a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="img/03.jpg" data-fancybox="group3" data-caption="グループ3キャプション"><img src="img/03.jpg" alt=""></a>
</div>
</li>
</ul>body 終了タグ直前に jQuery、Muuri で必要なJavaScript、Muuri、fancybox、動きを制御する自作のJS の5 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js"></script>
<script src="https://unpkg.com/muuri@0.8.0/dist/muuri.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
<!--自作のJS-->
<script src="js/6-2-2.js"></script>
CSSの書き方
/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:50px 20px;
}
.sort-btn li{
background:#eee;
list-style:none;
border-radius:10px;
cursor: pointer;
padding: 10px;
margin:0 10px;
}
.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
background:#ccc;
}
/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
justify-content: space-between;
}
.sort-btn li{
width:48%;
margin:0 0 10px 0;
text-align:center;
}
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
position: relative;/*並び替えの基準点を指定*/
}
/*各画像の横幅などの設定*/
.item {
display: block;
position: absolute;
width: 33%;/*横並びで3つ表示*/
z-index: 1;
list-style:none;
}
/*内側のボックスの高さが崩れないように維持*/
.item-content {
position: relative;
width: 100%;
height: 100%;
}
/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
width:100%;
height:auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/
}
/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
width: 49.5%;/*横並びで2つ表示*/
}
}
/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
background: transparent!important;
}
.fancybox-thumbs__list a:before {
border: 6px solid #FA999B;
}
JSの書き方
$(window).on('load',function(){ //画面遷移時にギャラリーの画像が被らないように、すべての読み込みが終わった後に実行する
//＝＝＝Muuriギャラリープラグイン設定
var grid = new Muuri('.grid', {
//アイテムの表示速度※オプション。入れなくても動作します
showDuration: 600,
showEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
hideDuration: 600,
hideEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
// アイテムの表示/非表示状態のスタイル※オプション。入れなくても動作します
visibleStyles: {
opacity: '1',
transform: 'scale(1)'
},
hiddenStyles: {
opacity: '0',
transform: 'scale(0.5)'
}
});
//＝＝＝並び替えボタン設定
$('.sort-btn li').on('click',function(){ //並び替えボタンをクリックしたら
$(".sort-btn .active").removeClass("active"); //並び替えボタンに付与されているactiveクラスを全て取り除き
var className = $(this).attr("class"); //クラス名を取得
className = className.split(' '); //「sortXX active」のクラス名を分割して配列にする
$("."+className[0]).addClass("active"); //並び替えボタンに付与されているクラス名とギャラリー内のリストのクラス名が同じボタンにactiveクラスを付与
if(className[0] == "sort00"){ //クラス名がsort00（全て）のボタンの場合は、
grid.show(''); //全ての要素を出す
} else { //それ以外の場合は
grid.filter("."+className[0]); //フィルターを実行
}
});
//＝＝＝ Fancyboxの設定
$('[data-fancybox]').fancybox({
thumbs: {
autoStart: true, //グループのサムネイル一覧をデフォルトで出す。不必要であればfalseに
},
});
});