【マウスオーバー】サムネイル画像のマウスオーバーでメイン画像を表示【表示領域サイズ固定の場合】

サムネイル画像をマウスオーバーするとメイン画像が表示されます。同様にキャプションのテキストも差し代わります。メイン画像の表示領域をサイズ固定で正方形にした場合の対応です。

くまのクッキー

パンとコーヒー

イチゴのかき氷

htmlの構造は下記の記事と同様です。画像のみ縦長の画像と横長の画像を配置しています。

CSSのコードも上記の記事と同様ですが、メイン画像の表示領域であるクラス名main_img_innerのdivタグに正方形のサイズをピクセル指定しています。また縦長の画像も横長の画像も中央に配置するため、display: flex、justify-content: center、align-items: centerを指定しています。

img {
	width: 100%;
}
.img_all {
	display: flex;
	justify-content: space-between;
}
.main_img {
	width: 336px;
}
.main_img_inner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 336px;
	height: 336px;
	border: 1px solid #cccccc;
	box-sizing: border-box;
}
.main_img img {
	vertical-align: top;
}
.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;
	vertical-align: top;
	box-sizing: border-box;
}
.thum_img div img:hover {
	cursor: pointer;
}
.thum_title {
	font-size: .8em;
	margin: .3em 0 0;
	text-align: center;
}
@media screen and (max-width: 680px) {
	.img_all {
		justify-content: flex-start;
	}
	.thum_img {
		display: block;
		width: 20%;
		margin: 0 0 0 1em;
	}
	.thum_img div {
		width: 100%;
	}
	.thum_title {
		margin: .3em 0 1em;
	}
}
@media screen and (max-width: 480px) {
	.img_all {
		display: block;
	}
	.main_title {
		margin: .3em 0 1em;
	}
}

最後にjQueryのコードです。
メイン画像とメインのキャプションの差し代えは上記の記事と同様です。今回はページ読み込み時とサムネイル画像マウスオーバー時にresizeImg関数を呼び出す処理を追加しています。メイン画像の横幅と高さを調べ、横幅の方が長ければメイン画像のCSSにwidth: 100%、height: autoを指定、高さの方が長ければwidth: auto、height: 100%を指定しています。縦長の画像と横長の画像で横幅と高さのCSSを切り替えて、表示領域のdivタグからはみ出してしまうのをふせぎます。

$(function() {
	function resizeImg() {
		$('.main_img img').each(function(){
			var img_w = $(this).width();
			var img_h = $(this).height();
			if(img_w >= img_h) {
				$('.main_img img').css({
					'width' : '100%',
					'height' : 'auto'
				});
			} else {
				$('.main_img img').css({
					'width' : 'auto',
					'height' : '100%'
				});
			}
		});
	}
	$('.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);
		}
		resizeImg();
	});
	resizeImg();
});