jQuery

シンプルなフォトギャラリー（1-3）

jQuery

/*
$(function () {
  $('#big').attr('src', $('#list img:first').attr('src'));    //最初に表示する拡大画像をセット（id=bigにattr(追加)。<img id="big" src="resources/photo1.jpg">となる)
     //.attrの後の（）の中は、まず、srcという文字列を出力、リスト項目の最初のイメージをfirstフィルターで取得、それを'src'に追加

  $('#list img').click(function () {             //サムネイルのリスト配下のimg要素をクリックしたときの処理
    var img = $(this);                   //imgは$(this)と同じであるという宣言
    $('#big')                     //id="big"を
       .hide(1000,function(){     //hide(隠す)、1秒かけて実行
         $(this).attr('src', img.attr('src'));  //$(this)はクリックされたimg、attr（以下を追加）、まずsrcの文字列、その後にクリックされた新しい画像
       })
       .show(2000);     //2秒かけて表示
  });            //サムネイルのリスト配下のimg要素をクリックしたときの処理はここまでで終わり
});

//ここからスライドショーの開始
$(function(){
	var imgIndex;     	// 画像インデックスを宣言
	var timerId;	         // タイマーIDを宣言
	$("#slideshow").click(function(){   	// ボタンがクリックされたときの処理
		imgIndex = 0;		// 画像インデックスを先頭に指定
		changeImage();		// 画像切り替えを実行
		$("#slideshow").prop("disabled", true); 		// ボタンを使用不可にする
		timerId = setInterval(changeImage,5000);		// タイマー開始
	});

	var changeImage = function() {  	// 画像を切り替える関数
		var selectedSrc = $(".thumb:eq("+imgIndex+")").attr("src");    // 画像インデックスのsrc属性の値を取り出す		
		$(".thumb").css("border", "");		// すべてのサムネイル画像から枠を取り除く
		$(".thumb:eq("+imgIndex+")").css("border", "thick solid #FF33FF");      // 表示しているサムネイル画像に枠を付ける

		$("#big").fadeOut("normal", function() {		// メイン画像をフェードアウトする
			$("#big").attr("src", selectedSrc);			// メイン画像のsrc属性の値を変更する
			$("#big").fadeIn();			// メイン画像をフェードインする
		});
		imgIndex++;   // 画像インデックスを次に移動（１増やす）
		if (imgIndex == $(".thumb").length) {		// 画像インデックスが要素数と一致したときタイマー停止
			clearInterval(timerId);			// ボタンを使用可能にする
			$("#slideshow").prop("disabled", false);
		}
	};
});
*/

////////////////////////////////////////////////////////////
$(function(){
	var imgIndex;	// 画像インデックスを宣言
	var timerId;	// タイマーIDを宣言
	$("#slideshow").click(function(){	// ボタンがクリックされたときの処理
		imgIndex = 0;		// 画像インデックスを先頭に指定
		changeImage();		// 画像切り替えを実行
		$("#slideshow").prop("disabled", true);		// ボタンを使用不可にする
		timerId = setInterval(changeImage,5000);		// タイマー開始
	});
	var changeImage = function() {      	// 画像を切り替える関数
		var selectedSrc = $(".thumb:eq("+imgIndex+")").attr("src");		// 画像インデックスのsrc属性の値を取り出す
		$(".thumb").css("border", "");		// すべてのサムネイル画像から枠を取り除く
		$(".thumb:eq("+imgIndex+")").css("border", "thick solid #FF33FF");		// 表示しているサムネイル画像に枠を付ける
		$(".main").fadeOut("normal", function() {		// メイン画像をフェードアウトする
			$(".main").attr("src", selectedSrc);			// メイン画像のsrc属性の値を変更する
			$(".main").fadeIn();			// メイン画像をフェードインする
		});
		imgIndex++;		// 画像インデックスを次に移動（１増やす）
		if (imgIndex == $(".thumb").length) {		// 画像インデックスが要素数と一致したときタイマー停止
			clearInterval(timerId);
			$("#slideshow").prop("disabled", false);			// ボタンを使用可能にする
		}
	};
});

CSS設定

#list { margin: 0px; padding: 0px;}
#list li {margin: 2px;height: 40px;list-style-type: none;float: left; }
#list img {width: 55px;height: 40px;}
hr {clear : both;}
#big {width: 315px;height: 235px;}

　

• 
• 
• 
• 

---

<ul id="list">
  <li><img src="../../../../resources/photo1.jpg" /></li>
  <li><img src="../../../../resources/photo2.jpg" /></li>
  <li><img src="../../../../resources/kaminari-mon.png" /></li>
  <li><img src="../../../../resources/Desktop.jpg" /></li>
</ul>
<hr />
<img id="big" />