商品詳細ページのように、サムネイル画像をクリックしたらメイン画像が変わる画像ビューアーを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();
	});
});

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

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

  1. 初めまして。いつもわかり安い解説をありがとうございます。
    現在サンプルコードをもとに、画像ビューワを同ページに複数設置できないかと挑戦しているのですが、どうもうまくいきません。
    症状としては、ページを開いた際に2箇所目以降のビューワのメイン画像が縦一列で表示されてしまいます。
    サムネイルをクリックすると正常の表示に戻ります。

    Javascriptのコードは以下の通りです。

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

    もし解決策があれば教えていただけますと助かります。
    よろしくお願いします。

    1. お返事遅くなってすみません。
      コメントありがとうございます!

      メイン画像が縦一列で表示されるということは、CSSで初期の画像以外をdisplay:none;にしている部分が適用されていないのではないでしょうか?

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA