WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

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

jQueryプラグインポートフォリオ

vestride.github.io

デモページ

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

$(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'
		});
	});

htmlタグを参照文字で書く

<li><a href="img/04.jpg" data-lightbox="photo" data-title="<a href="https://www.kirin.co.jp/" target="_blank">サイトへ"><img src="img/03-thum.jpg" alt=""></a></li>

を参照文字に直すと

<li><a href="img/04.jpg" data-lightbox="photo" data-title="&lt;a href=&quot;https://www.kirin.co.jp/&quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;">テキスト</a></li>

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>フィルタリングとモーダルの組み合わせ</title>
<style>
html,body,h1,ul,li {
  margin:0;
  padding:0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
  color:#222;
}
img {
  vertical-align:bottom;
}
.container {
  width:840px;
  margin: 0 auto;
}
h1 {
  padding:20px 0;
  margin-bottom:60px;
}
.g-nav ul {
  display:flex;
  margin-bottom:60px;
}
.g-nav li {
  margin-right:20px;
}
.g-nav li a {
  display:block;
  padding:10px;
  font-size:18px;
}
.g-nav li a:hover {
  background:#DDD;
}
.g-nav li.active {
  background:#DDD;
}
.grid li {
  width:200px;
  float:left;
  margin:5px;
}
</style>
<link rel="stylesheet" href="css/lightbox.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 src="js/lightbox.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>
<div class="container">
<header>
<h1>Shuffle.js</h1>
<nav class="g-nav">
<ul id="btn">
<li class="active" data-group="all"><a href="#">all</a></li>
<li data-group="html"><a href="#">HTML&amp;CSS</a></li>
<li data-group="js"><a href="#">JavaScript</a></li>
<li data-group="php"><a href="#">PHP</a></li>
<li data-group="banner"><a href="#">バナー</a></li>
</ul>
</nav>
</header>
<div class="content">
<ul class="grid" id="animationList">
<li data-groups='["html"]'><a href="img/model1.jpg" data-lightbox="image-1" data-title="&lt;a href=&quot; &quot; target=&quot;_blank&quot;>サイトへ&lt;/a&gt;"><img src="img/00.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
<li data-groups='["banner"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/04.jpg" alt=""></a></li>
<li data-groups='["php"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/03.jpg" alt=""></a></li>
<li data-groups='["html"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/01.jpg" alt=""></a></li>
<li data-groups='["js"]'><a href="img/model.jpg" data-lightbox="image-1"><img src="img/02.jpg" alt=""></a></li>
</ul>
</div>
</div>
</body>
</html>