ホームページで写真を見せる方法はいろいろあります。
よくあるのが、横スライドで写真が流れるパターンでしょうか。
スライドパターンは、プラグインも多くあり簡単に導入できます。
別のパターンで、写真クリックでメイン画像に反映される方法があります。
以下のようなパターンです。
サブ画像をクリックしたら、メイン画像に反映される動作です。
今回この仕組みを導入する必要があり、いつものようにプラグインで対応できるだろうと考えていました。
しかし、このパターンのプラグインを見つけることができませんでした。
ならば、作るしかない。
ということでいつものごとくググって、調べて自作しました。
まず作ってみたものがこちら
何はともあれ、まず作ってみました。
それがこちらです。
やりたいことはこれでできています。
クリックしたら画像が切り替わるパターンは、ググるとたくさん出てきました。
ただ、クリックされたサブ画像に「変化」をつけるものがなかなかなく、その部分は自作しました。
ソースはこちらです
<!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>
解説
全体を見るとわかりにくいですが、部分的にみると理解しやすいものです。
部分的に解説いたします。
メイン画像、サブ画像部分
<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>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)
});
});
});実際に動作している部分です。
ここからは、細かく解説いたします。
①1個目の画像を選択状態に設定
// ①
$(".sub_img dt").eq(0).addClass("select");1個目のサブ画像を選択状態にしています。
②サブ画像がクリックされた場合に動作
// ②
$(".sub_img img").click(function()
{サブ画像がクリックされた場合に、処理が発生します。
③サブ画像のパスを取り出す
// ③
var img = $(this).attr("src");クリックしたサブ画像のパスを取り出しています。
④サブ画像選択状態を設定
// ④
$(".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)
});③でとりだしたサブ画像のパスを、メイン画像に割り当てしています。
その際にフェードアウト、フェードインをしています。
せっかくなのでプラグイン化してみました。
今回だけならば、直記述だけでよいのですが、もしかしたら次に使う機会があるかもしれないと思いました。
ならば、プラグイン化しておけば、次回も使うことができます。
そういえば、以前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>記述部分は、プラグインを呼び出している部分だけになります。
メイン画像のスタイルシート、サブ画像のスタイルシート、選択状態にするタグ、選択状態のスタイルシート名、ディレイ時間、デフォルト選択になります。
select_classのスタイルシート名に「.」（ピリオド）がないのは、addClass、removeClassに渡すためです。Jqueryは通常ピリオドが必要ですが、addClass、removeClass関数に限っては、ピリオドを付けずに引き渡します。
default_no が０なのは、1個目をデフォルトとしています。
dlタグのdt要素の1個目は、数字にすると0から始まります。
なので、1個目は0と表記します。
（ちなみに5個目は４と表記します。）
さほど大した動きをしていないので、使い道があるかわかりませんがダウンロードリンクを掲載いたします。
ダウンロードはこちら
（右クリックで保存してください）
本記事がお役に立てば幸いです。