fancyboxとmixitupを使ったモーダルウィンドウ
複数のjQueryプラグインを使って、フィルタリング機能とモーダルウィンドウを使ったギャラリーを作成しましょう。
複数のプラグインを使うことで、管理すべきファイルの数が多くなるので、気を付けましょう。
参考サイト
chiyo-katsumasa.com
<!DOCTYPE HTML> <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>