Jqueryで画像選択でメイン画像が切り替わるものを作ってみた

2022年3月22日

ホームページで写真を見せる方法はいろいろあります。
よくあるのが、横スライドで写真が流れるパターンでしょうか。

スライドパターンは、プラグインも多くあり簡単に導入できます。

別のパターンで、写真クリックでメイン画像に反映される方法があります。
以下のようなパターンです。

サブ画像をクリックしたら、メイン画像に反映される動作です。

今回この仕組みを導入する必要があり、いつものようにプラグインで対応できるだろうと考えていました。

しかし、このパターンのプラグインを見つけることができませんでした。
ならば、作るしかない。

ということでいつものごとくググって、調べて自作しました。

今回の内容

1. まず作ってみたものがこちら
2. ソースはこちらです
3. 解説
4. せっかくなのでプラグイン化してみました。
5. プラグイン化したものがこちら

まず作ってみたものがこちら

何はともあれ、まず作ってみました。
それがこちらです。

やりたいことはこれでできています。
クリックしたら画像が切り替わるパターンは、ググるとたくさん出てきました。
ただ、クリックされたサブ画像に「変化」をつけるものがなかなかなく、その部分は自作しました。

ソースはこちらです

<!doctype html>
<html>
<head>
<meta charset="shift_jis">
<title>メイン画像切り替え</title>
<style type="text/css">
img
{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

section
{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}

section .sub_img dl
{
	display: table;
	table-layout: fixed;
	width: 100%;
	margin: 0px;
	padding: 0px;
}

section .sub_img dl dt
{
	display: table-cell;
	width: 24%;
	margin: 0px;
	padding: 0px;
	vertical-align: top;
	border: 10px solid #FFF;
}

section .sub_img dl dt img
{
	cursor:pointer;
}

section .sub_img dl dd
{
	display: table-cell;
	margin: 0px;
	padding: 0px;
}

.select
{
	border: 10px solid #000 !important;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function()
{
	$(".sub_img dt").eq(0).addClass("select");
	$(".sub_img img").click(function()
	{
		var img = $(this).attr("src");

		$(".sub_img dt").removeClass("select");
		$(this).parent().addClass("select");

		$(".main_img img").fadeOut(500, function()
		{
			$(this).attr("src", img),
			$(this).fadeIn(500)
		});
	});
});

</script>
</head>
<body>

<section>
<div class="main_img"><img src="01.gif"></div>

<div class="sub_img">
<dl>
<dt><img src="01.gif"></dt><dd></dd>
<dt><img src="02.gif"></dt><dd></dd>
<dt><img src="03.gif"></dt><dd></dd>
<dt><img src="04.gif"></dt><dd></dd>
<dt><img src="05.gif"></dt><dd></dd>
</dl>
</div>

</section>

</body>
</html>

100

<!doctype html>

<html>

<head>

<title>メイン画像切り替え</title>

img

{

width:100%;

height:auto;

vertical-align:bottom;

}

section

{

width:1000px;

margin-right:auto;

margin-left:auto;

}

section .sub_img dl

{

display:table;

table-layout:fixed;

width:100%;

margin:0px;

padding:0px;

}

section .sub_img dl dt

{

display:table-cell;

width:24%;

margin:0px;

padding:0px;

vertical-align:top;

border:10pxsolid#FFF;

}

section .sub_img dl dt img

{

cursor:pointer;

}

section .sub_img dl dd

{

display:table-cell;

margin:0px;

padding:0px;

}

.select

{

border:10pxsolid#000!important;

}

</style>

$(function()

{

$(".sub_img dt").eq(0).addClass("select");

$(".sub_img img").click(function()

{

varimg=$(this).attr("src");

$(".sub_img dt").removeClass("select");

$(this).parent().addClass("select");

$(".main_img img").fadeOut(500,function()

{

$(this).attr("src",img),

$(this).fadeIn(500)

});

</script>

</head>

<body>

<dl>

</dl>

</div>

</section>

</body>

</html>

解説

全体を見るとわかりにくいですが、部分的にみると理解しやすいものです。
部分的に解説いたします。

メイン画像、サブ画像部分

<div class="main_img"><img src="01.gif"></div>

<div class="sub_img">
<dl>
<dt><img src="01.gif"></dt><dd></dd>
<dt><img src="02.gif"></dt><dd></dd>
<dt><img src="03.gif"></dt><dd></dd>
<dt><img src="04.gif"></dt><dd></dd>
<dt><img src="05.gif"></dt><dd></dd>
</dl>
</div>

<dl>

</dl>

</div>

HTMLコーディング部分です。
見た目はスタイルシートで調整します。
dl dtタグを使用していますが、ul liタグでも実装可能です。

Jquery部分

$(function()
{
	// ①
	$(".sub_img dt").eq(0).addClass("select");

	// ②
	$(".sub_img img").click(function()
	{
		// ③
		var img = $(this).attr("src");

		// ④
		$(".sub_img dt").removeClass("select");
		$(this).parent().addClass("select");

		// ⑤
		$(".main_img img").fadeOut(500, function()
		{
			$(this).attr("src", img),
			$(this).fadeIn(500)
		});
	});
});

$(function()

{

// ①

$(".sub_img dt").eq(0).addClass("select");

// ②

$(".sub_img img").click(function()

{

// ③

varimg=$(this).attr("src");

// ④

$(".sub_img dt").removeClass("select");

$(this).parent().addClass("select");

// ⑤

$(".main_img img").fadeOut(500,function()

{

$(this).attr("src",img),

$(this).fadeIn(500)

});

実際に動作している部分です。
ここからは、細かく解説いたします。

①1個目の画像を選択状態に設定

// ①
$(".sub_img dt").eq(0).addClass("select");

1 2	// ① $(".sub_img dt").eq(0).addClass("select");

1個目のサブ画像を選択状態にしています。

②サブ画像がクリックされた場合に動作

// ②
$(".sub_img img").click(function()
{

// ②

$(".sub_img img").click(function()

{

サブ画像がクリックされた場合に、処理が発生します。

③サブ画像のパスを取り出す

// ③
var img = $(this).attr("src");

1 2	// ③ varimg=$(this).attr("src");

クリックしたサブ画像のパスを取り出しています。

④サブ画像選択状態を設定

// ④
$(".sub_img dt").removeClass("select");
$(this).parent().addClass("select");

// ④

$(".sub_img dt").removeClass("select");

$(this).parent().addClass("select");

サブ画像の選択状態スタイルシート（.select）を解除し、クリックしたサブ画像のdtタグに選択スタイルシート（.select）をあてがっています。

⑤メイン画像の差し替え

// ⑤
$(".main_img img").fadeOut(500, function()
{
	$(this).attr("src", img),
	$(this).fadeIn(500)
});

// ⑤

$(".main_img img").fadeOut(500,function()

{

$(this).attr("src",img),

$(this).fadeIn(500)

});

③でとりだしたサブ画像のパスを、メイン画像に割り当てしています。
その際にフェードアウト、フェードインをしています。

せっかくなのでプラグイン化してみました。

今回だけならば、直記述だけでよいのですが、もしかしたら次に使う機会があるかもしれないと思いました。

ならば、プラグイン化しておけば、次回も使うことができます。

そういえば、以前Jqueryプラグイン化の記事を書いていました。

Jqueryで独自プラグインを自作してみました

自分で書いた記事ですが、これを参考にプラグイン化しました。
以前書いた記事が忘備録として役に立ちました。

プラグイン化したものがこちら

先ほども画像切り替えをプラグイン化したもの

見た目は同じですが、中身が違います。

<script src="photo_select.js"></script>
<script>
$(document).ready(function()
{
	$(".main_img").photo_select({
		main_class : ".main_img",
		sub_class : ".sub_img",
		select_tag: "dt",
		select_class : "select" ,
		deley: 500,
		default_no : 0
	});
});
</script>