ギャラリー
-複合検索でカテゴリ別に画像を並び替える-
See the Pen 6-2-3 複合検索でカテゴリ別に画像を並び替える by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内の要素をクリックして動きを確かめてね!
動きを実現する仕組み
Muuri というJavaScript ライブラリを使って段組みと画像の並び替えを実現する。
画像をクリックして拡大するためにfancybox というJavaScript ライブラリを利用する。
[使用するライブラリ]
* jQuery
* Muuri(https://haltu.github.io/muuri/)
* fancybox(http://fancyapps.com/fancybox/3/)
※ fancybox は、商用利用の場合は有料。別のライブラリLightbox(https://lokeshdhakar.com/projects/lightbox2/)などで代用可能。
HTMLの書き方
- head終了タグ直前にfancyboxのCSSと自作のCSSの2つを読み込みます。
<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-3.css"> </head>
- body内のギャラリーを表示させたい場所にHTMLを記載します。
チェックボックスの<li>についたクラス名と、画像を内包する<li>のクラス名が一致した要素を表示させます。<ul class="sort-btn"> <li><dl><dt>All</dt><dd><ul><li class="all active">全て</li></ul></dd></dl></li> <li><dl><dt>Color</dt><dd><ul> <li class="color01">Color1</li> <li class="color02">Color2</li> <li class="color03">Color3</li> </ul></dd></dl></li> <li><dl><dt>Category</dt><dd><ul> <li class="cat01">カテゴリ1</li> <li class="cat02">カテゴリ2</li> <li class="cat03">カテゴリ3</li> </ul></dd></dl></li> <!--/sort-btn--></ul> <ul class="grid"><!--1番外側のタグにgrid というクラス名を付与。--> <li class="item cat01 color01"><!--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 cat01 cat02 color01"> <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 cat03 color02"> <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-3.js"></script> </body>
自作のCSS内の書き方
/*==================================================
ギャラリーのためのcss
===================================*/
/*===並び替えボタンチェックマークのCSS*/
.sort-btn{
background: #f3f3f3;
padding: 20px;
margin:50px 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.sort-btn dt{
font-weight: bold;
margin:0 0 10px 0;
}
.sort-btn dd{
margin:0 0 10px 0;
}
.sort-btn ul{
display: flex;
flex-wrap: wrap;
}
.sort-btn li{
margin:0 10px;
list-style:none;
}
.sort-btn ul li{
position: relative;
cursor: pointer;
padding:0 0 0 30px;
margin:0 10px 0 0;
}
/*横幅が810px以下になった際の指定*/
@media only screen and (max-width: 810px) {
.sort-btn li{
width:100%;
margin:0;
}
.sort-btn ul li{
width:auto;
}
}
/*チェックマークの設定*/
.sort-btn ul li::before{
content:'';
position: absolute;
left:0;
width:20px;
height:20px;
border:2px solid #ccc;
}
.sort-btn ul li.active::after{/*現在地=activeというクラス名がついたらチェックマークを出現*/
content:'';
position: absolute;
left:5px;
top:0;
/*チェックマークの色や形*/
border-left:2px solid #333;
border-bottom:2px solid #333;
width:16px;
height:9px;
transform:rotate(-45deg);
}
/*===Muuriのレイアウトのための調整 */
.grid {
position: relative;/*並び替えの基準点を指定*/
}
/*各画像の横幅などの設定*/
.item {
display: block;
position: absolute;
width: 33%;/*横並びで3つ表示*/
padding:0 10px 10px 10px;/*画像に余白をつける*/
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つ表示*/
padding: 0 5px 10px 5px;
}
}
/*===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 ul li').on('click',function(){//並び替えボタンをクリックしたら
var className = $(this).attr("class")//クリックしたボタンのクラス名を取得
className = className.split(' '); //「.sort-btn ul li」のクラス名を分割して配列にする
//ボタンにクラス名activeがついている場合
if($(this).hasClass("active")){
if(className[0] != "all"){ //ボタンのクラス名がallでなければ
$(this).removeClass("active"); //activeクラスを消す
var selectElms = $(".sort-btn ul li.active"); //ボタン内にactiveクラスがついている要素を全て取得
if(selectElms.length == 0){ //取得した配列内にactiveクラスがついている要素がなければ
$(".sort-btn ul li.all").addClass("active");//ボタンallにactiveを追加し
grid.show(''); //ギャラリーの全ての画像を表示
}else{
filterDo(); //取得した配列内にactiveクラスがついている要素があれば並び替えを行う
}
}
}
//ボタンにクラス名activeがついていない場合
else{
if(className[0] == "all"){ //ボタンのクラス名にallとついていたら
$(".sort-btn ul li").removeClass("active"); //ボタンのli要素の全てのactiveを削除し
$(this).addClass("active"); //allにactiveクラスを付与
grid.show(''); //ギャラリーの全ての画像を表示
}else{
if($(".all").hasClass("active")){ //allクラス名にactiveクラスが付いていたら
$(".sort-btn ul li.all").removeClass("active");//ボタンallのactiveクラスを消し
}
$(this).addClass("active"); //クリックしたチェックボックスへactiveクラスを付与
filterDo(); //並び替えを行う
}
}
});
//===画像の並び替え設定
function filterDo(){
var selectElms = $(".sort-btn ul li.active"); //全てのボタンのactive要素を取得
var selectElemAry = []; //activeクラスがついているボタンのクラス名(sortXX)を保存する配列を定義
$.each(selectElms, function(index, selectElm) {
var className = $(this).attr("class") //activeクラスがついている全てのボタンのクラス名(sortXX)を取得
className = className.split(' '); //ボタンのクラス名を分割して配列にし、
selectElemAry.push("."+className[0]); //selectElemAry配列に、チェックのついたクラス名(sortXX)を追加
})
str = selectElemAry.join(','); //selectElemAry配列に追加されたクラス名をカンマ区切りでテキストにして
grid.filter(str); //grid.filter(str);のstrに代入し、ボタンのクラス名とliにつけられたクラス名が一致したら出現
}
});
バリエーション
を見る
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!