jQueryでフェードイン・フェードアウトを使った画像ギャラリーの作成方法

こんにちは、皆さん!今日は、jQueryを使って画像ギャラリーを作成し、
フェードインとフェードアウトのエフェクトで画像を切り替える方法をご紹介します。
このチュートリアルでは、サムネイルをクリックすると画像がスムーズに切り替わり、
一定の間隔で自動的に画像が切り替わるギャラリーを作成します。

必要なもの

  • HTML
  • CSS
  • jQueryライブラリ

手順

1. HTML構造の作成

まず、基本的なHTML構造を作成します。
メイン画像を表示するためのコンテナと、サムネイル画像を並べるコンテナを用意します。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery {
display: flex;
}

.main-image {
flex: 1;
position: relative;
overflow: hidden;
}

.main-image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.main-image img.active {
opacity: 1;
}

.thumbnail-images {
display: flex;
flex-direction: column;
}

.thumbnail {
width: 100px;
margin: 5px;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="gallery">
<div class="main-image">
<img src="path/to/thumb1.jpg" alt="Main Image" id="mainImage" class="active">
</div>
<div class="thumbnail-images">
<img src="path/to/thumb1.jpg" alt="Thumbnail 1" class="thumbnail">
<img src="path/to/thumb2.jpg" alt="Thumbnail 2" class="thumbnail">
<img src="path/to/thumb3.jpg" alt="Thumbnail 3" class="thumbnail">
<img src="path/to/thumb4.jpg" alt="Thumbnail 4" class="thumbnail">
<img src="path/to/thumb5.jpg" alt="Thumbnail 5" class="thumbnail">
</div>
</div>
</body>
</html>

2. CSSスタイルの追加

次に、CSSを追加してギャラリーのスタイルを整えます。ここでは、メイン画像とサムネイル画像のスタイルを設定します。

.gallery {
display: flex;
}

.main-image {
flex: 1;
position: relative;
overflow: hidden;
}

.main-image img {
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.main-image img.active {
opacity: 1;
}

.thumbnail-images {
display: flex;
flex-direction: column;
}

.thumbnail {
width: 100px;
margin: 5px;
cursor: pointer;
}

3. jQueryを使った動作の追加

最後に、jQueryを使ってサムネイルをクリックしたときの動作や
自動的に画像を切り替える機能を追加します。

$(document).ready(function() {
let currentIndex = 0;
const thumbnails = $('.thumbnail');
const mainImageContainer = $('.main-image');
let isTransitioning = false;
const fadeDuration = 1000; // 1秒のフェードイン・フェードアウト

function updateMainImage(index) {
if (isTransitioning) return;
isTransitioning = true;

const newImageSrc = thumbnails.eq(index).attr('src');
const newImage = $('<img>').attr('src', newImageSrc).css('opacity', 0);

mainImageContainer.append(newImage);

newImage.animate({ opacity: 1 }, fadeDuration);
$('.main-image img.active').animate({ opacity: 0 }, fadeDuration, function() {
$(this).removeClass('active');
newImage.addClass('active');
$(this).remove();
isTransitioning = false;
});
}

thumbnails.each(function(index) {
$(this).on('click', function() {
currentIndex = index;
updateMainImage(index);
});
});

function autoSwitchImage() {
if (isTransitioning) return;
currentIndex = (currentIndex + 1) % thumbnails.length;
updateMainImage(currentIndex);
}

setInterval(autoSwitchImage, 3000); // 3秒ごとに画像を切り替える
});

まとめ

これで、サムネイルをクリックしたときにフェードイン・フェードアウトの効果で
メイン画像が切り替わるギャラリーが完成しました。
さらに、自動的に一定間隔で画像が切り替わる機能も実装されました。

この方法を応用すれば、さまざまなデザインの画像ギャラリーを作成することができます。
ぜひ、試してみてください!