サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。

桃とブドウ

桃とブドウ

パンとコーヒー

イチゴのかき氷
htmlのコードは下記になります。
メイン画像のみを格納するdivタグを用意し、class=”main_img_inner”を付与します。
<div class="img_all">
<div class="main_img">
<div class="main_img_inner"><img src="hover05.jpg" alt="桃とブドウ"></div>
<p class="main_title">桃とブドウ</p>
</div>
<div class="thum_img">
<div><img src="hover05.jpg" alt="桃とブドウ"><p class="thum_title">桃とブドウ</p></div>
<div><img src="hover06.jpg" alt="パンとコーヒー"><p class="thum_title">パンとコーヒー</p></div>
<div><img src="hover07.jpg" alt="イチゴのかき氷"><p class="thum_title">イチゴのかき氷</p></div>
</div>
</div>
続いてCSSのコードです。
スマホ表示用に、サムネイル画像を縦並びにするメディアクエリも記述します。
img {
width: 100%;
vertical-align: top;
box-sizing: border-box;
}
.img_all {
display: flex;
justify-content: space-between;
}
.main_img {
width: 48%;
}
.main_img img {
border: 1px solid #cccccc;
}
.main_title {
margin: .3em 0 0;
text-align: center;
}
.thum_img {
display: flex;
justify-content: space-between;
width: 49%;
}
.thum_img div {
width: 30%;
}
.thum_img div img {
border: 1px solid #cccccc;
}
.thum_img div img:hover {
cursor: pointer;
}
.thum_title {
font-size: .8em;
margin: .3em 0 0;
text-align: center;
}
@media screen and (max-width: 480px) {
.main_img {
width: 68%;
}
.thum_img {
display: block;
width: 28%;
}
.thum_img div {
width: 100%;
}
.thum_title {
margin: .3em 0 1em;
}
}
最後にjQueryのコードです。
サムネイル画像とメイン画像のimgタグのsrc属性を比較して、異なる場合のみ画像とキャプションの差し代えを実行します。メイン画像のimgタグとキャプションのテキストは、子要素が削除できるemptyを利用して削除します。その後、cloneを利用してサムネイル画像を複製し、appendToでメイン画像を追加。appendでキャプションを追加しています。
$(function() {
$('.thum_img div img').hover(function() {
var thum_text = $(this).parent().find('.thum_title').text();
var thum_src = $(this).attr('src');
var main_src = $('.main_img img').attr('src');
if(thum_src != main_src){
$('.main_img_inner').empty();
$(this).clone().appendTo('.main_img_inner');
$('.main_title').empty();
$('.main_title').append(thum_text);
}
});
});