<!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://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js">
</script>
<style>@charset "utf-8";
/*==================================================
ギャラリーのためのcss
===================================*/
.gallery {
columns: 4; /*段組みの数*/
padding: 0 10px; /*ギャラリー左右に余白をつける*/
}
.gallery li {
margin-bottom: 10px; /*各画像下に余白をつける*/
}
/*ギャラリー内のイメージは横幅100%にする*/
.gallery img {
width: 100%;
height: auto;
vertical-align: bottom; /*画像の下にできる余白を削除*/
box-shadow: 5px 5px 5px #666;
}
/* 横幅900px以下の段組み設定 */
@media only screen and (max-width: 900px) {
.gallery {
columns: 3;
}
}
@media only screen and (max-width: 768px) {
.gallery {
columns: 2;
}
}
/*========= レイアウトのための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: 10px 0;
}
p {
margin: 0 10px 10px 10px;
word-wrap: break-word;
}
/*画像を出現させるアニメーションCSS*/
.flipRightTop {
animation-name: flipRightTop;
animation-duration: 1.5s;
animation-fill-mode: forwards;
perspective-origin: right top;
opacity: 0;
}
@keyframes flipRightTop {
from {
transform: perspective(600px) translate3d(0, 0, 0) rotateX(-30deg)
rotateY(-30deg);
opacity: 0;
}
to {
transform: perspective(600px) translate3d(0, 0, 0) rotate(0deg);
opacity: 1;
}
}</style>
</head>
<body>
<body>
<div class="wrapper">
<h1>Gallery</h1>
<p>画像拡大に使用したライブラリ：<a href="https://lokeshdhakar.com/projects/lightbox2/" target="_blank">https://lokeshdhakar.com/projects/lightbox2/</a>
</p>
<ul class="gallery">
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_01.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_01.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_02.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_02.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_03.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_03.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_04.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_04.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_05.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_05.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/img_05.jpg" data-lightbox="gallery0" data-title="グループ0キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/img_06.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/01.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/01.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/02.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/02.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/03.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/03.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/04.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/04.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/05.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/05.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/06.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/06.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/07.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/07.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/08.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/08.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/09.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/09.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/10.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/10.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/11.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/11.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/12.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/12.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/13.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/13.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/14.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/14.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/15.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/15.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/16.jpg" data-lightbox="gallery1" data-title="グループ1キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/16.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/17.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/17.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/18.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/18.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/19.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/19.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/20.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/20.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/21.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/21.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/22.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/22.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/23.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/23.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/24.jpg" data-lightbox="gallery2" data-title="グループ2キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/24.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/25.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/25.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/26.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/26.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/27.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/27.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/28.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/28.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/29.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/29.jpg" alt="">
</a>
</li>
<li>
<a href="http://localhost:10072/wp-content/uploads/demos/_assets/30.jpg" data-lightbox="gallery3" data-title="グループ3キャプション">
<img src="http://localhost:10072/wp-content/uploads/demos/_assets/30.jpg" alt="">
</a>
</li>
</ul>
<!--/wrapper-->
</div>
<script>//lightbox オプションの設定※https://lokeshdhakar.com/projects/lightbox2/#options参照
lightbox.option({
wrapAround: true, //グループ最後の写真の矢印をクリックしたらグループ最初の写真に戻る
albumLabel: " %1 / total %2 " //合計枚数中現在何枚目かというキャプションの見せ方を変更できる
});
//ふわっと見せるためのJS。ページが読み込まれたらすぐに動かしたい&画面をスクロールをしたら動かしたい場合内のソースコード使用
function fadeAnime() {
// flipLeft
$(".gallery li").each(function () {
var elemPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll >= elemPos - windowHeight) {
$(this).addClass("flipRightTop");
} else {
$(this).removeClass("flipRightTop");
}
});
}
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまで画面をスクロールをしたら動かしたい場合の記述
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
fadeAnime(); /* アニメーション用の関数を呼ぶ*/
}); // ここまでページが読み込まれたらすぐに動かしたい場合の記述
//# sourceURL=pen.js</script>
</body>
</html>