MixItUp - フィルター - コーディング

MixItUp - フィルター

フィルターをかけることができるjQuery プラグイン

www.kunkalabs.com

ポラロイド風写真の作り方

HTML文書構造を記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>MixItUp - フィルター</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <h1 class="heading1">日本の四季</h1>
  <ul class="controls">
    <li class="filter" data-filter="all">四季</li>
    <li class="filter" data-filter=".spring">春</li>
    <li class="filter" data-filter=".summer">夏</li>
    <li class="filter" data-filter=".fall">秋</li>
    <li class="filter" data-filter=".winter">冬</li>
    <li class="filter" data-filter=".spring, .summer">春 &amp; 夏</li>
  </ul>
  <ul class="content" id="contentid">
    <li class="mix spring"><img src="img/spring.jpg" alt=""></li>
    <li class="mix summer"><img src="img/summer.jpg" alt=""></li>
    <li class="mix fall"><img src="img/fall.jpg" alt=""></li>
    <li class="mix winter"><img src="img/winter.jpg" alt=""></li>
    <li class="mix summer"><img src="img/summer.jpg" alt=""></li>
    <li class="mix winter"><img src="img/winter.jpg" alt=""></li>
    <li class="mix spring"><img src="img/spring.jpg" alt=""></li>
    <li class="mix fall"><img src="img/fall.jpg" alt=""></li>
    <li class="mix spring"><img src="img/spring.jpg" alt=""></li>
    <li class="mix winter"><img src="img/winter.jpg" alt=""></li>
    <li class="mix fall"><img src="img/fall.jpg" alt=""></li>
    <li class="mix summer"><img src="img/summer.jpg" alt=""></li>
    <li class="mix winter"><img src="img/winter.jpg" alt=""></li>
    <li class="mix fall"><img src="img/fall.jpg" alt=""></li>
    <li class="mix spring"><img src="img/spring.jpg" alt=""></li>
    <li class="mix winter"><img src="img/winter.jpg" alt=""></li>
    <li class="mix summer"><img src="img/summer.jpg" alt=""></li>
    <li class="mix fall"><img src="img/fall.jpg" alt=""></li>
  </ul>
</div><!-- /.container -->
</body>
</html>

MixItUp のプラグインをダウンロード

解凍後、必要なファイルを移動

「mixitup.min.js」を、作成する「js」フォルダー内に移動

JavaScriptファイルをリンク

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/mixitup.min.js"></script>

実行するためのスクリプトを記述

<script>
let element = document.getElementById('contentid');
let mixer = mixitup(element);
</script>

CSSを記述

ギャラリーのレイアウトには「CSS Grid」を設定する

@charset "UTF-8";

/* ----------------------------------------
  reset
---------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

/* ----------------------------------------
  body
---------------------------------------- */
body {
  color: #333;
  font-size: 16px;
  font-family: 
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  line-height: 1.0;
  overflow-y: scroll;
}

/* ----------------------------------------
  layout
---------------------------------------- */
.container {
  text-align: center;
}
h1 {
  line-height: 1.8;
}
.controls {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.controls > li {
  display: block;
  padding: 6px 10px;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: pointer;
}
.content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: min(90%, 960px);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .content {
    grid-template-columns: repeat(4, 1fr);
  }
}