デモ:オーバーレイを複数同時に表示

jQuery toolsによる「オーバーレイを複数同時に表示」の動作デモです。
サムネイルをクリックするとオーバーレイで拡大します

[閉じる]
[閉じる]
[閉じる]

サンプルコード

HTMLのサンプル

<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" rel="#pica" class="thumb" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" rel="#picb" class="thumb" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" rel="#picc" class="thumb" />

<div id="pica" class="picBox"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300a.png" /><span class="toziru">[閉じる]</span></div>
<div id="picb" class="picBox"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300b.png" /><span class="toziru">[閉じる]</span></div>
<div id="picc" class="picBox"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300c.png" /><div class="toziru">[閉じる]</div></div>

CSSのサンプル

#example .picBox {
	position: relative;
	display:none;
	background: #fff;
	border: solid 4px #eee;
	padding:25px;
	border-radius:5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-border-radius: 10px;
	-webkit-box-shadow: #59698F 1px 1px 2px;
	-moz-box-shadow: #59698F 1px 1px 2px;
	box-shadow: #59698F 1px 1px 2px;
}
#example .toziru{
	position: absolute;
	top: 5px;
	right: 5px;
	display: block;
	border: #ccc solid 2px;
	background: #eed;
	width: 60px;
	padding: 5px;
	text-align: center;
	border-radius:5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-ms-border-radius: 5px;
	cursor: pointer;
}
#example .thumb {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

Javascriptのサンプル

$(document).ready(function() {
	// オーバーレイ・インスタンスのポジション
	var positions = [ 
			[0, 	530],
			[400, 20],
			[400, 530] 
		];
 	// トリガーのセットアップ
 	$("#example img[rel]").each(function (i){
 		$(this).overlay({
 	 		// 共通の設定
 	 		oneInstance: false, 
			closeOnClick: false, 
 			close: ".toziru",

 	 	 	// 画像単位の指定(ポジション)
			top: positions[i][0],
			left: positions[i][1]
		});
	});
});