mixitup を使ってフィルタリング機能を実装

多くのコンテンツを見せる際にフィルタリング機能やソート機能などを付けて、ユーザーの利便性を向上させましょう。
さらにモーダルウィンドウを追加して、ページ遷移することなく、動線をそのページで完結出来るようにしましょう。

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>

obu.edu

参考サイト
chiyo-katsumasa.com

<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>

クリエイティブ・コモンズ・ライセンス

また、フリー素材の使い方だけでなく、画像素材等の著作物の権利についてもしっかりと覚えましょう。
creativecommons.jp