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 を使用して基本的な画像ギャラリーを作成する方法を学びました。ここで紹介した基本を応用すれば、より高度でインタラクティブなギャラリーを作成することができます。

## さらに学ぶ

JavaScript のイベント処理についてさらに詳しく学ぶ。
アニメーションライブラリを使用して、より滑らかな画像遷移を実装する。
Lightbox やモーダルなどのコンポーネントを使用して、画像をより魅力的に表示する。

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

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

1. HTML の設定

2. CSS のスタイリング

3. JavaScript の実装

## まとめ

## さらに学ぶ

関連質問