ライブラリで簡単に
参考YOUTUBEサイト
https://www.youtube.com/watch?v=k1yULKWfO-s&t=86s
- index.htmlとstyle.cssとimagesを用意する。
- リンクからzipファイルをダウンロードしてその中にあるimagesをそのままフォルダに入れる。(imgはsmallとgibの２種類が用意されていた)
https://github.com/Shin-sibainu/image-gallery-with-lightbox/blob/main/style.css
- htmlとcssともに雛形を作成
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<!-- lightbox2のcss -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.css" integrity="sha512-DKdRaC0QGJ/kjx0U0TtJNCamKnN4l+wsMdION3GG0WVK6hIoJ1UPHRHeXNiGsXdrmq19JJxgIubb/Z7Og2qJww==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<h1>画像ギャラリー</h1>
<div class="gallery">
<a href="#">
<img src="./images/cat1-small.jpg" alt="猫-small-1" />
</a>
</div>
</body>
</html>
body {
background-color:burlywood;
}
h1 {
text-align: center;
font-size: 2.5rem;
color: white;
margin: 30px 0 50px;
}
.gallery {
margin: 10px 50px;
text-align: center;
}
.gallery img {
width: 380px;
height: 200px;
padding: 10px;
object-fit: cover;
}
- lightbox2というライブラリをcdnjs形式で使う。
cdnjsでは、ネットに繋がった状態でのみ動作を可能にできる
lightbox2のためのcdn
lightbox2 cdnjsをGoogle検索して
css(head内)とscript(bodyの閉じタグの直前)をそれぞれ挿入
jqueryの挿入も忘れずに！
- lightbox2のルール通りに記述
aタグにdata-lightbox="cat" data-title="かわいい猫"と追記するとライブラリが適用される
catと同一の名前のimgがグループ化されて矢印で次の画像に映ることができているみたいです。
<a href="./images/cat1-big.jpg" data-lightbox="cat" data-title="かわいい猫">
<img src="./images/cat1-small.jpg" alt="猫-small-1" />
</a>
.gallery img {
<!--
追記部分
-->
filter: grayscale(100%); /* imgを白黒にする */
transition: 0.7s; /* ゆっくり白黒からカラーに変える */
}
.gallery img:hover {
filter: grayscale(0);/* imgがカラーに */
transform: scale(1.1); /* 画像が1.1倍に大きくなる*/
}
完成図
