多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。
さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。
github.com
高機能モーダルウィンドウ「Fancybox」のCDN
今回はモーダルウィンドウにLightboxの代わりに「Fancybox3」を使用してみます。
fancybox CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
fancybox JS
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
参考サイト
chiyo-katsumasa.com
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mix it upの実装</title>
<style>
img {
vertical-align:bottom;
}
header {
display:flex;
justify-content:center;
}
button {
display:block;
padding:10px;
width:80px;
margin:10px;
cursor:pointer;
}
.container {
width:960px;
margin:40px auto;
overflow:hidden;
}
.mix {
margin:10px;
float:left;
}
</style>
<link rel="stylesheet" href="css/jquery.fancybox.css">
</head>
<body>
<header>
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".red">赤色</button>
<button type="button" data-filter=".green">緑色</button>
<button type="button" data-filter=".blue">青色</button>
<button type="button" data-filter=".even">偶数</button>
<button type="button" data-filter=".youtube">動画</button>
<button type="button" data-sort="order:asc">番号順</button>
<button type="button" data-sort="order:descending">逆番号順</button>
<button type="button" data-sort="random">ランダム</button>
</header>
<div class="container">
<div class="mix red" data-order="1">
<a data-fancybox="gallery" href="img/1-2.jpg">
<img src="img/1.jpg" alt="">
</a>
</div>
<div class="mix red even" data-order="2">
<a data-fancybox="gallery" href="img/2-2.jpg">
<img src="img/2.jpg" alt="">
</a>
</div>
<div class="mix red" data-order="3">
<a data-fancybox="gallery" href="img/3-2.jpg">
<img src="img/3.jpg" alt="">
</a>
</div>
<div class="mix green even" data-order="4">
<a data-fancybox="gallery" href="img/4-2.jpg">
<img src="img/4.jpg" alt="">
</a>
</div>
<div class="mix green" data-order="5">
<a data-fancybox="gallery" href="img/5-2.jpg">
<img src="img/5.jpg" alt="">
</a>
</div>
<div class="mix green even" data-order="6">
<a data-fancybox="gallery" href="img/6-2.jpg">
<img src="img/6.jpg" alt="">
</a>
</div>
<div class="mix blue" data-order="7">
<a data-fancybox="gallery" href="img/7-2.jpg">
<img src="img/7.jpg" alt="">
</a>
</div>
<div class="mix blue even" data-order="8">
<a data-fancybox="gallery" href="img/8-2.jpg">
<img src="img/8.jpg" alt="">
</a>
</div>
<div class="mix blue" data-order="9">
<a data-fancybox="gallery" href="img/9-2.jpg">
<img src="img/9.jpg" alt="">
</a>
</div>
<div class="mix even youtube" data-order="10">
<a data-fancybox="gallery" href="https://www.youtube.com/watch?v=tKsB5ID134o">
<img src="img/10.jpg" alt="">
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/mixitup.js"></script>
<script>
var mixer = mixitup('.container');
</script>
</body>
</html>
