<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://unpkg.com/web-animations-js@2.3.2/web-animations.min.js">
</script>
<script src="https://unpkg.com/muuri@0.9.5/dist/muuri.min.js">
</script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js">
</script>
<style>@charset "utf-8";
/*==================================================
ギャラリーのためのcss
===================================*/
/*＝＝＝並び替えボタンのCSS*/
.sort-btn {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 15px 20px;
}
.sort-btn li {
background: #eee;
list-style: none;
border-radius: 10px;
cursor: pointer;
padding: 10px;
margin: 0 10px;
}
.sort-btn li.active {
/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
background: #ccc;
}
/*横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn {
justify-content: space-between;
}
.sort-btn li {
width: 48%;
margin: 0 0 10px 0;
text-align: center;
}
}
/*＝＝＝Muuriのレイアウトのための調整 */
.grid {
position: relative; /*並び替えの基準点を指定*/
}
/*各画像の横幅などの設定*/
.item {
display: block;
position: absolute;
width: 33%; /*横並びで3つ表示*/
z-index: 1;
}
/*内側のボックスの高さが崩れないように維持*/
.item-content {
position: relative;
width: 100%;
height: 100%;
}
/*画像の横幅を100%にしてレスポンシブ化*/
.grid img {
width: 100%;
height: auto;
vertical-align: bottom; /*画像の下にできる余白を削除*/
}
/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
width: 49.5%; /*横並びで2つ表示*/
}
}
/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
background: transparent !important;
}
.fancybox-thumbs__list a:before {
border: 6px solid #fa999b;
}
/*========= レイアウトのためのCSS ===============*/
ul {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: #333;
}
a:hover,
a:active {
text-decoration: none;
}
h1 {
text-align: center;
font-size: 6vw;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 30px 0;
}
p {
margin: 0 10px 10px 10px;
word-wrap: break-word;
}</style>
</head>
<body>
<body>
<div class="wrapper">
<h1>Gallery</h1>
<p>画像一覧の列調整と並び替えで使用したライブラリ：<a href="https://haltu.github.io/muuri/" target="_blank">https://haltu.github.io/muuri/</a>
</p>
<p>画像拡大に使用したライブラリ：<a href="http://fancyapps.com/fancybox/3/" target="_blank">http://fancyapps.com/fancybox/3/</a>
<br>※商用利用の場合fancyboxは有料になります。公式サイトを参照してください。</p>
<ul class="sort-btn">
<li class="sort00 active">全て</li>
<li class="sort01">グループ1</li>
<li class="sort02">グループ2</li>
<li class="sort03">グループ3</li>
</ul>
<ul class="grid">
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/01.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/01.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/02.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/02.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/03.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/03.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/04.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/04.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/05.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/05.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/06.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/06.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/07.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/07.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/08.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/08.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/09.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/09.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/10.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/10.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/11.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/11.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/12.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/12.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/13.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/13.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/14.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/14.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/15.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/15.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/16.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/16.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/17.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/17.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/18.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/18.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/19.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/19.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/20.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/20.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/21.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/21.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/22.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/22.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/23.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/23.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/24.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/24.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/25.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/25.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/26.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/26.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/27.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/27.jpg" alt="">
</a>
</div>
</li>
<li class="item sort01">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/28.jpg" data-fancybox="group1" data-caption="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/28.jpg" alt="">
</a>
</div>
</li>
<li class="item sort02">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/29.jpg" data-fancybox="group2" data-caption="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/29.jpg" alt="">
</a>
</div>
</li>
<li class="item sort03">
<div class="item-content">
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/30.jpg" data-fancybox="group3" data-caption="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/30.jpg" alt="">
</a>
</div>
</li>
</ul>
<!--/wrapper-->
</div>
<script>$(window).on("load", function () {
//画面遷移時にギャラリーの画像が被らないように、すべての読み込みが終わった後に実行する
//＝＝＝Muuriギャラリープラグイン設定
var grid = new Muuri(".grid", {
//アイテムの表示速度※オプション。入れなくても動作します
showDuration: 600,
showEasing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
hideDuration: 600,
hideEasing: "cubic-bezier(0.215, 0.61, 0.355, 1)",
// アイテムの表示/非表示状態のスタイル※オプション。入れなくても動作します
visibleStyles: {
opacity: "1",
transform: "scale(1)" },
hiddenStyles: {
opacity: "0",
transform: "scale(0.5)" } });
//＝＝＝並び替えボタン設定
$(".sort-btn li").on("click", function () {
//並び替えボタンをクリックしたら
$(".sort-btn .active").removeClass("active"); //並び替えボタンに付与されているactiveクラスを全て取り除き
var className = $(this).attr("class"); //クラス名を取得
className = className.split(" "); //「sortXX active」のクラス名を分割して配列にする
$("." + className[0]).addClass("active"); //並び替えボタンに付与されているクラス名とギャラリー内のリストのクラス名が同じボタンにactiveクラスを付与
if (className[0] == "sort00") {
//クラス名がsort00（全て）のボタンの場合は、
grid.show(""); //全ての要素を出す
} else {
//それ以外の場合は
grid.filter("." + className[0]); //フィルターを実行
}
});
//＝＝＝ Fancyboxの設定
$("[data-fancybox]").fancybox({
thumbs: {
autoStart: true //グループのサムネイル一覧をデフォルトで出す。不必要であればfalseに
} });
});
//# sourceURL=pen.js</script>
</body>
</html>