webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

高機能なフィルタリングjQueryプラグイン 「Shuffle.js」

vestride.github.io


デモページ

http://yachin29.com/school/shuffle/






ソース

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィルタリング</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/shuffle-styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/jquery.shuffle.min.js"></script>
<script>
	$(function() {
		$('#btn li').on('click', function() {
			var $this = $(this),
				$grid = $('#animationList');
			$('#btn .active').removeClass('active');
			$this.addClass('active');
			$grid.shuffle($this.data('group'));
		});
		$('#animationList').shuffle({
			group: 'all',
			speed: 700,
			easing: 'ease-in-out'
		});
	});
</script>
</head>

<body>
<h1>フィルタリング機能の導入</h1>
<ul id="btn" class="list">
<li data-group="all" class="active">全て</li>
<li data-group="red">赤色系</li>
<li data-group="blue">青色系</li>
<li data-group="green">緑色系</li>
<li data-group="favorite">お気に入り</li>
</ul>

<ul class="gallery" id="animationList">
<li data-groups='["red","favorite"]'><a href="#">
<img src="https://placehold.jp/db2e5c/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["red"]'><a href="#">
<img src="https://placehold.jp/ed4e4e/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["red"]'><a href="#">
<img src="https://placehold.jp/eb6b38/ffffff/200x150.jpg" alt="">
</a></li>

<li data-groups='["blue"]'><a href="#">
<img src="https://placehold.jp/6a36eb/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["blue","favorite"]'><a href="#">
<img src="https://placehold.jp/1a79b8/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["blue"]'><a href="#">
<img src="https://placehold.jp/1ab8a0/ffffff/200x150.jpg" alt="">
</a></li>

<li data-groups='["green"]'><a href="#">
<img src="https://placehold.jp/32b81a/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["green"]'><a href="#">
<img src="https://placehold.jp/86e041/ffffff/200x150.jpg" alt="">
</a></li>
<li data-groups='["green","favorite"]'><a href="#">
<img src="https://placehold.jp/8ac710/ffffff/200x150.jpg" alt="">
</a></li>


</ul>
</body>
</html>

Swipebox

今回はさらに作ったフィルタリングに「Swipebox」というスワイプ機能がついているモーダルウィンドウを加えてみましょう。


brutaldesign.github.io