デモ:オーバーレイでマスクをかけた場合

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="close">[閉じる]</span></div>
<div id="picb" class="picBox"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300b.png" /><span class="close">[閉じる]</span></div>
<div id="picc" class="picBox"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300c.png" /><span class="close">[閉じる]</span></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 .close{
	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() {
	$("#example img[rel]").overlay({
		mask: {
			maskId: "maskId", // マスクのID
			loadSpeed: "slow",		// マスクの開く速度(ミリ秒)
			closeSpeed: "fast",		// マスクの閉じる速度(ミリ秒)
			closeOnClick: true,		// クリックした時に閉じるか?
			closeOnEsc: true,			// ESCボタンによるクローズを許可するか?
			zIndex: 9998,					// z-index値
			opacity: 0.8,					// 透明度
			startOpacity: 0,			// 開始透明度
			color: "#fff",				// マスクの色
			onLoad: function (){
				alert("マスクが開きました");
			},
			onClose: function (){
				alert("マスクが閉じられました");
			}
		}
	});
});