デモ:簡易画像ギャラリー

jQuery toolsによる「簡易画像ギャラリー」の動作デモです。

サンプルコード

HTMLのサンプル

<div id="limgage">
	<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300a.png" />
</div>

<!-- "前へ移動" -->
<a class="prev browse left">prev</a>

<!-- スクロールアイテム・ルート -->
<div class="scrollable">   
	<!-- スクロールアイテム・セット -->
	<div class="items">
		<!-- 1-3 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" class="active" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" />
		</div>
		<!-- 4-6 -->
		<div>
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50d.png" style="margin-left:5px;" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50e.png" />
			<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50f.png" />
		</div>
	</div>
</div>
<!-- "次へ移動" -->
<a class="next browse right">next</a>

CSSのサンプル

/* ボタン */
#example .browse{
	display:block;
	float: left;
	width: 30px;
	height: 16px;
	margin-top: 20px;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/tool/ic_arrow.png) no-repeat;
	cursor: pointer;
}
#example .prev{	background-position: 0 0; padding-left: 18px;}
#example .prev:hover{	background-position: 0 -100px;}
#example .next{	background-position: -470px 0; padding-right: 18px;}
#example .next:hover{	background-position: -470px -100px;}
#example .disabled{	background: none; color: #999; cursor: default;}

/* パネルを囲う要素 */
#example .scrollable {
	float: left;
	margin: 0 10px;
	border: solid 1px #999;
	padding: 5px;
	background: #eee;
	position:relative;
	overflow:hidden;
	width: 270px;
	height:56px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
}
#example .scrollable img{
	margin-right: 5px;
	border: solid 2px #eee;
	cursor: pointer;
}
#example .scrollable .active{
	border-color: #ff3;
}
#example .scrollable .items {
	width:20000em;
	position:absolute;
}
#example .items div {
	float:left;
}
#example #limgage{
	border: solid 1px #999;
	background: #eee;
	width: 482px;
	margin-bottom: 10px;
	padding: 10px;
	border-radius:3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
}

Javascriptのサンプル

$(function() {
	// 基本の例
	$(".scrollable").scrollable({
		circular: true,         // 繰り返し
		easing: "linear",       // スクロール方法
		speed: 1000,            // 速度(ミリ秒)
		keyboard: false         // キーボード操作
	});

	$("#example .items img").click(function() {

		// もしサムネイルと同じものを表示していたらキャンセル
		if ($(this).hasClass("active")) { return; }

		// 画像の一部を置換して画像を取得
		var url = $(this).attr("src").replace("80x50", "480x300");

		// 大きい画像用の要素を取得して半透明化
		var wrap = $("#limgage").fadeTo("medium", 0.5);

		// 画像要素を生成
		var img = new Image();
  	// 画像が読み込み完了したら関数を実行
		img.onload = function() {

			// 半透明化していた画像枠の当メイドを解除
			wrap.fadeTo("fast", 1);

			// 画像を大きいものに置換
			wrap.find("img").attr("src", url);

		};

		// 画像のsrc属性にURLをセット
		img.src = url;

		// アクティブクラスを一時全解除し、クリックしたサムネイルにアクティブクラスを付与
		$(".items img").removeClass("active");
		$(this).addClass("active");

	// 最初の要素に対して最初に実行
	}).filter(":first").click();
		
});