jQueryでつくるクリックで画像が切り替わるギャラリー | 25egg

サムネイルをクリックすると画像が切り替わるだけのサンプルです。

確認環境Chorme54,Safari9

HTML

<div class="photo"><img src="images/photo01.jpg"></div>
<div class="nav">
	<ul>
		<li><a href="images/photo01.jpg"><img src="images/photo01_s.jpg"></a></li>
		<li><a href="images/photo02.jpg"><img src="images/photo02_s.jpg"></a></li>
		<li><a href="images/photo03.jpg"><img src="images/photo03_s.jpg"></a></li>
	</ul>
</div>

jQuery

この記述の前にjQueryの読み込みが必要です。

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

CSS

サムネイルの横並びやアクティブ時の装飾です。
なくても画像は切り替わります。

.over img{
	opacity:0.5;
}
.nav ul{
	margin: 0;
	padding: 0;
}
.nav li{
	display:inline;
	list-style:none;
	padding: 10px;
}
<< ブログ記事にもどる