【JavaScript】簡易的なギャラリーを作成する。クリックすると画像が切り替わる。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript で簡易的なギャラリー要素を作成してみます。
下の画像をクリックすると、上に表示され、切り替わる感じですね。
同じ画像を使っているので、少し分かりづらいかもですが、img の名前にだけ気をつけて、そこは考えてみて下さい。

HTMLです。【JavaScript】簡易的なギャラリーを作成する。クリックすると画像が切り替わる。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="full-img">
    <img class="displayed-img" src="images/macaron01.png">
    <div class="overlay"></div>
  </div>

  <div class="thumb-bar">
  </div>

  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】簡易的なギャラリーを作成する。クリックすると画像が切り替わる。


body {
  width: 500px;
  margin: 100px auto 0;
}

.displayed-img {
  width: 100%;
}

.thumb-bar {
  display: flex;
}
.thumb-bar img {
  width: 20%;
}

JavaScriptです。【JavaScript】簡易的なギャラリーを作成する。クリックすると画像が切り替わる。


// ギャラリー
const displayedImage = document.querySelector('.displayed-img');

const thumbBar = document.getElementsByClassName('thumb-bar')[0];
const thumbImg = thumbBar.getElementsByTagName('img');

for (let i = 1; i <= 5; i++) {
  const newImage = document.createElement('img');
  newImage.setAttribute('src', 'images/macaron0' + i + '.png');
  thumbBar.appendChild(newImage);
  newImage.onclick = function (e) {
    displayedImage.src = e.target.src;
  };
};