JavaScript イメージギャラリー

JavaScript イメージギャラリー：ダイナミックな画像表示を実現する方法

JavaScript イメージギャラリー：ダイナミックな画像表示を実現する方法

このページでは、JavaScript を使用して魅力的な画像ギャラリーをウェブサイトに実装する方法を学びます。画像の切り替え、サムネイルの表示、ユーザーインタラクションの追加など、ステップバイステップのガイドで基本から応用まで解説します。

JavaScript イメージギャラリーの作成：ステップバイステップガイド

このガイドでは、JavaScript、HTML、CSS を使用して動的な画像ギャラリーを作成する方法を学びます。ユーザーは画像をクリックして拡大表示したり、矢印ボタンを使って前後の画像に移動したりできます。

1. HTML の設定

まずは、画像ギャラリーの基礎となる HTML 構造を作成します。 


<div class="gallery">
  <img src="" alt="メイン画像" id="main-image">
  <div class="thumbnails">
    <!-- サムネイル画像がここに追加されます -->
  </div>
</div>
  • <div class="gallery">: ギャラリー全体を囲むコンテナです。
  • <img src="" alt="メイン画像" id="main-image">: メインで表示する画像要素です。JavaScript で src 属性が動的に変更されます。
  • <div class="thumbnails">: サムネイル画像を配置するためのコンテナです。

2. CSS のスタイリング

HTML の構造ができたので、CSS を使用してギャラリーの外観をデザインします。ここでは、シンプルなギャラリーのスタイル例を示します。


.gallery {
  width: 600px;
  margin: 0 auto;
}

#main-image {
  width: 100%;
  height: auto;
}

.thumbnails {
  display: flex;
  margin-top: 10px;
}

.thumbnails img {
  width: 100px;
  height: auto;
  margin-right: 10px;
  cursor: pointer;
}

この CSS は、ギャラリーの幅、メイン画像のサイズ、サムネイル画像の配置などを定義しています。必要に応じて、自由にスタイルを調整してください。

3. JavaScript の実装

最後に、JavaScript を使用してギャラリーに動的な機能を追加します。 


const images = [
  { src: 'image1.jpg', alt: '画像1' },
  { src: 'image2.jpg', alt: '画像2' },
  { src: 'image3.jpg', alt: '画像3' },
  // ... 他の画像データ
];

const mainImage = document.getElementById('main-image');
const thumbnailsContainer = document.querySelector('.thumbnails');

// サムネイル画像を生成して追加
images.forEach(image => {
  const thumbnail = document.createElement('img');
  thumbnail.src = image.src;
  thumbnail.alt = image.alt;
  thumbnail.addEventListener('click', () => {
    mainImage.src = image.src;
    mainImage.alt = image.alt;
  });
  thumbnailsContainer.appendChild(thumbnail);
});

この JavaScript コードは、以下の処理を行います。

  • images 配列: 表示する画像の URL と alt テキストを格納します。
  • mainImage, thumbnailsContainer: HTML 要素への参照を取得します。
  • forEach ループ: 各画像データに対して、新しいサムネイル画像要素を生成し、クリックイベントリスナーを設定して、thumbnailsContainer に追加します。
  • クリックイベントリスナー: サムネイル画像がクリックされると、対応する画像をメイン画像として設定します。

## まとめ

このガイドでは、JavaScript を使用して基本的な画像ギャラリーを作成する方法を学びました。ここで紹介した基本を応用すれば、より高度でインタラクティブなギャラリーを作成することができます。

## さらに学ぶ

関連質問

Q1: サムネイル画像のサイズを変更するにはどうすればよいですか？
A1: CSS の .thumbnails img ルールの width と height プロパティを調整することで、サムネイル画像のサイズを変更できます。
Q2: ギャラリーに「次へ」「前へ」ボタンを追加するにはどうすればよいですか？
A2: HTML にボタン要素を追加し、JavaScript でクリックイベントリスナーを設定して、現在表示されている画像のインデックスを更新し、対応する画像を表示します。
Q3: 画像の読み込み中にローディングアニメーションを表示するにはどうすればよいですか？
A3: JavaScript の Image オブジェクトの onload イベントを使用して、画像の読み込みが完了したときにローディングアニメーションを非表示にすることができます。

その他の参考記事:jquery プラグ イン ギャラリー