jQueryの基本

jQuery

シンプルなフォトギャラリー（２）

jQueryの働き

jQuery

$(function(){
   $(".thumb").click(function(){	               // サムネール画像がクリックされたときの処理
	 var selectedSrc = $(this).attr("src");    // src属性の値を取り出す

   $(".main").fadeOut("normal", function() {    // メイン画像をフェードアウトする
	 $(".main").attr("src", selectedSrc);      // メイン画像のsrc属性の値を変更する
	 $(".main").fadeIn();                      // メイン画像をフェードインする
		});
	});
});

CSS設定

実行例　

このやり方だと、最初の画像がサムネイルをどれかクリックするまで拡大画像が表示されない。

html

<img src="../../../../resources/photo1.jpg" width="90" height="90" class="thumb">
<img src="../../../../resources/photo2.jpg" height="90" class="thumb">
<img src="../../../../resources/kaminari-mon.png" height="90" class="thumb">
<img src="../../../../resources/lion.jpg" width="90" height="90" class="thumb">
<hr>
<img src="spring.jpg" width="320" height="320" class="main">

３行目の「Click」を「mouseover」に変更するとマウスを乗せただけで画像を変化させることが出来る。