JavaScriptでサムネイル画像をローディング画像に切り替え

はるか

今回の課題にJavaScriptでサムネイル画像をローディング画像に切り替える実装方法を紹介したいと思います。実装手順通りやっていきます。
 
１、フォルダーを配置
２、HTMLファイルを作成
３、CSSで画像を装飾
４、JavaScriptで画像をクリックするときのメソッドを作成
 
フォルダーを配置

  • 「sample」フォルダーを新規作成します。

  • その中に「css」「img」「js」フォルダーとHTMLファイルを新規作成します。(img-1)

  • cssファイル（style.css）を作成して、フォルダー「css」に入れます。(img-2)

  • 同じサイズの画像を5枚用意しておきます。ファイル名は下記のようにします。それをフォルダー「img」に入れます。(img-3)

  • JavaScriptファイル（imgSwitch.js）を作成して、フォルダー「js」に入れます。(img-4)

img-1
img-2
img-3
img-4

HTMLファイルを作成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでサムネイル画像をローディング画像に切り替え</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div id="imgBox">
    <div class="main"></div>
    <div class="thumb"></div>
  </div>
  <script src="js/imgSwitch.js"></script>
</body>
</html>

HTMLファイルにcssファイルを<title>と<body>の間に差し込みします。
JavaScriptファイルを</body>の前に配置します。
希望のレイアウトによって、imgBoxブロック要素にmainブロック要素とthumbブロック要素を配置します。
mainブロック要素はローディング画像の配置場所で、thumbブロック要素はサムネイル画像の配置場所となっています。

CSSで画像を装飾

body {
  background-color: azure;
  box-sizing: border-box;
  text-align: center;
}
 #imgBox  {
  margin: auto;
  padding-top: 60px;
  width: 500px;
}
 #imgBox  .main img {
  border: 4px solid #fff ;
  box-shadow: 0px 0px 14px #000 ;
  width: 100%;
}
 #imgBox  .main p {
  color: blueviolet;
  font-size: 24px;
  font-weight: bold;
}
 #imgBox  .thumb img {
  border:4px solid #fff ;
  border-radius: 400px;
  box-shadow: 0px 0px 10px #000 ;
  height: 60px;
  margin: 10px;
  width: 60px;
}

このコードでサンプルページの背景色、画像の中央揃え、画像のサイズ、ボーダの仕様を装飾しました。

JavaScriptで画像をクリックするときのメソッドを作成

// アルバムデータの作成
var album = [
  { src: 'img/1.jpg', msg: 'ふとすぎだ！'},
  { src: 'img/2.jpg', msg: '運動しよう'},
  { src: 'img/3.jpg', msg: '簡単な方法からやる'},
  { src: 'img/4.jpg', msg: '順調に進んでいる'},
  { src: 'img/5.jpg', msg: '出来ました！'}
];

// 最初のデータを表示しておく
var mainImage = document.createElement('img');
mainImage.setAttribute('src', album[0].src);
mainImage.setAttribute('alt', album[0].msg);

var mainMsg = document.createElement('p');
mainMsg.innerText = mainImage.alt;

var mainFlame = document.querySelector('#imgBox .main');
mainFlame.insertBefore(mainImage, null);
mainFlame.insertBefore(mainMsg, null);

// サムネイル画像の表示
var thumbFlame = document.querySelector('#imgBox .thumb');
for (var i = 0; i < album.length; i++) {
  var thumbImage = document.createElement('img');
  thumbImage.setAttribute('src', album[i].src);
  thumbImage.setAttribute('alt', album[i].msg);
  thumbFlame.insertBefore(thumbImage, null);
}

// クリックした画像をメインにする
thumbFlame.addEventListener('click', function(event) {
  if (event.target.src) {
    mainImage.src = event.target.src;
    mainMsg.innerText = event.target.alt;
  }
});

実装効果は下記です。

予想図

サムネイル画像をクリックして、それに対するローディング画像を表示されます。予想図は最後のサムネイル画像をクリックしたときの表示です。

ここでコードの詳細を共有しました。ホームページなどを作成するときに、サムネイル画像をローディング画像に切り替える実装がよくあるので、ご参考にしてください。



エンジニアファーストの会社
株式会社CRE‐CO
嬋

この記事が気に入ったらサポートをしてみませんか？