商品詳細ページのように、サムネイル画像をクリックしたらメイン画像が変わる画像ビューアーをjQueryで作ってみた

ショッピングサイトとかで商品詳細ページにある、あれです。

画像ビューアーというのか、、サムネイルをクリックしたらメイン画像が切り替わるやつです。

説明が難しいので、サンプルをご覧ください。

サンプルページ

HTML

メインの画像と、サムネイルの画像をliで書いています。サムネイル画像もメイン画像も、同じ画像を使用しています。変えることも可能。
ここでliにclassを付けるのがポイント。

<ul class="main">
    <li class="item1"><img src="images/item1.jpg" alt="" /></li>
    <li class="item2"><img src="images/item2.jpg" alt="" /></li>
    <li class="item3"><img src="images/item3.jpg" alt="" /></li>
    <li class="item4"><img src="images/item4.jpg" alt="" /></li>
</ul>
<ul class="thumb">
    <li class="thumb1"><img src="images/item1.jpg" alt="" /></li>
    <li class="thumb2"><img src="images/item2.jpg" alt="" /></li>
    <li class="thumb3"><img src="images/item3.jpg" alt="" /></li>
    <li class="thumb4"><img src="images/item4.jpg" alt="" /></li>
</ul>

jQuery

クリックしたサムネイル画像のliのclassを取得してきて、slice()でその末尾の数字をnumに格納しています。
slice()の中の数字はclass名の文字数によって変更してください。今回はitem1なので数字は5番目、slice(5)になっています。

そしてメイン画像を表示させる前に一度全ての画像をhide()で隠しておいて、fadeIn()で該当の画像を表示させます。

$(function(){
	$('.thumb li').click(function(){
		var class_name = $(this).attr("class"); //クリックしたサムネイルのclass名を取得
		var num = class_name.slice(5); //class名の末尾の数字を取得
		$('.main li').hide(); //メインの画像を全て隠す
		$('.item' + num).fadeIn(); //クリックしたサムネイルに対応するメイン画像を表示
	});
});

class名の文字数にさえ気をつければ、画像が何枚あっても対応できると思います。

サンプルコードをダウンロードできます。
かわいいトイプードルの写真付き＼(^o^)／

ダウンロード

おまけ：失敗例

ちなみに、わたしがこのコードを書く前に単純に書いたコードがこちら。

$(function(){
	$('.thumb1').click(function(){
		$('.item1').fadeIn();
		$('.item2').hide();
		$('.item3').hide();
		$('.item4').hide();
	});
	$('.thumb2').click(function(){
		$('.item1').hide();
		$('.item2').fadeIn();
		$('.item3').hide();
		$('.item4').hide();
	});
	$('.thumb3').click(function(){
		$('.item1').hide();
		$('.item2').hide();
		$('.item3').fadeIn();
		$('.item4').hide();
	});
	$('.thumb4').click(function(){
		$('.item1').hide();
		$('.item2').hide();
		$('.item3').hide();
		$('.item4').fadeIn();
	});
});

これだと、画像の枚数が増えたらまたコードを追加しなくちゃいけないんですね〜(*_*)