《jQuery》クリックで画像が切り替わるギャラリー

<div class="gallery"><img src="https://placehold.jp/300x300.png?text=1"></div>
<ul class="nav">
	<li class="nav-list"><a href="https://placehold.jp/300x300.png?text=1"><img src="https://placehold.jp/75x75.png?text=1"></a></li>
	<li class="nav-list"><a href="https://placehold.jp/300x300.png?text=2"><img src="https://placehold.jp/75x75.png?text=2"></a></li>
	<li class="nav-list"><a href="https://placehold.jp/300x300.png?text=3"><img src="https://placehold.jp/75x75.png?text=3"></a></li>
</ul>

.active {
	opacity: .5;
}
.nav {
	display: flex;
	margin: 10px -5px 0;
	padding: 0;
}
.nav-list {
	list-style: none;
	margin: auto 5px;
}
.nav-list a {
	display: block;
	outline: none;
}

jQuery(function($){
	$(".gallery img").bind("load",function(){
		var ImgHeight = $(this).height();
		$('.gallery').css('height',ImgHeight);
	});
	
	$('.nav a').click(function(){
		if($(this).children('img').hasClass('active') == false){
		$('.nav a').children('img').removeClass('active');
		$(this).children('img').addClass('active');
		$('.gallery img').hide().attr('src',$(this).attr('href')).fadeIn();
		};
		 return false;
	}).filter(':eq(0)').click();
});