以前、jQueryを使ってフィルタラブルを実装する方法を紹介しましたが、jQueryライブラリでMixItUpがあるので紹介します。動きは以前紹介した :: jQueryを使ってフィルタラブルを実装するとほとんど同じですが、jQueryライブラリはオプションが豊富で動作もスムーズです。
実装もほぼ同じくらいのコード量です。（MixItUpはmixitup.jsの読み込みとたったの4行のJavascriptで実装出来ます。）
さらにさまざまなオプションを加えることでエフェクト効果を操作することが出来るので、環境や好みに合わせて使ってみてください。
※デザインはすべて :: jQueryを使ってフィルタラブルを実装すると同じものを使っています。
目次
サンプル
まずはCodepenのソースコードをご確認ください。AllやAustralia、Japanなどのボタンをクリックすると属性に紐付いた画像だけが表示されるようになります。
See the Pen Filterable With MixItUp by SHO EGAWA (@sho-egawa) on CodePen.
フィルタラブルの実装解説
まずはjQuery本体とmixitup.jsを読み込みます。
mixitupはここからダウンロード出来ます。
https://www.kunkalabs.com/mixitup
|
1 2 |
<script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="mixitup.js"></script> |
htmlのボタン箇所
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="row mb-5"> <div class="col-6 col-md-4 mb-3"> <span class="trigger active btn btn-light btn-block btn-sm" data-filter="all">All</span> </div> <div class="col-6 col-md-4 mb-3"> <span class="trigger btn btn-light btn-block btn-sm" data-filter=".australia">Australia</span> </div> <div class="col-6 col-md-4 mb-3"> <span class="trigger btn btn-light btn-block btn-sm" data-filter=".japan">Japan</span> </div> <div class="col-6 col-md-4 mb-3"> <span class="trigger btn btn-light btn-block btn-sm" data-filter=".usa">USA</span> </div> <div class="col-6 col-md-4 mb-3"> <span class="trigger btn btn-light btn-block btn-sm" data-filter=".spain">Spain</span> </div> <div class="col-6 col-md-4 mb-3"> <span class="trigger btn btn-light btn-block btn-sm" data-filter=".india">India</span> </div> </div> |
triggerクラスと、data-filter=”***”がポイントです。triggerクラスはjsでクリックアクションを操作する時に使います。
data-filter=”***”はタグや属性を指定します。名称は何でも構いません。
今回はall、australia、japan、usa、spain、indiaとしています。
htmlの写真箇所
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<div class="row"> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-1.jpg">Australia01</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-1.jpg">Japan01</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-1.jpg">USA01</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-1.jpg">Spain01</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-1.jpg">India01</div> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-2.jpg">Australia02</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-2.jpg">Japan02</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-2.jpg">USA02</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-2.jpg">Spain02</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-2.jpg">India02</div> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-3.jpg">Australia03</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-3.jpg">Japan03</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-3.jpg">USA03</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-3.jpg">Spain03</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-3.jpg">India03</div> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-4.jpg">Australia04</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-4.jpg">Japan04</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-4.jpg">USA04</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-4.jpg">Spain04</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-4.jpg">India04</div> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-5.jpg">Australia05</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-5.jpg">Japan05</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-5.jpg">USA05</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-5.jpg">Spain05</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-5.jpg">India05</div> <div class="col-6 col-md-4 mix mb-3 text-center filter australia"><img src="images/australia-6.jpg">Australia06</div> <div class="col-6 col-md-4 mix mb-3 text-center filter japan"><img src="images/japan-6.jpg">Japan06</div> <div class="col-6 col-md-4 mix mb-3 text-center filter usa"><img src="images/usa-6.jpg">USA06</div> <div class="col-6 col-md-4 mix mb-3 text-center filter spain"><img src="images/spain-6.jpg">Spain06</div> <div class="col-6 col-md-4 mix mb-3 text-center filter india"><img src="images/india-6.jpg">India06</div> </div> |
ポイントはfilterとその後ろにあるaustralia、japan、usa、spain、indiaの箇所とmixというクラスを追加していることです。
Javascriptの解説
|
1 2 3 4 5 6 7 8 9 |
$(function() { var containerEl = document.querySelector('.photo-list'); var mixer = mixitup(containerEl); }); $(document).on('click', '.trigger', function () { $('.trigger').removeClass('active'); $(this).addClass('active'); }); |
1〜4行目はmixitupを動かすスクリプトです。
5〜8行目はボタンを押下したときにactiveクラスを追加するスクリプトです。これによりボタンを押した箇所の色を変えています。
公式サイトに詳細なドキュメントがあるので参考にしてみてください。動くスピードやアニメーションを変更することが出来ます。
https://www.kunkalabs.com/mixitup
LEAVE A REPLY