デモ:オーバーレイのエフェクトをカスタマイズ

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" /><div class="close">[閉じる]</div></div>

CSSのサンプル

/* ツールチップのスタイル 挿入場所はbodyの一番下になります。 */
#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() {
	// エフェクトの設定
	$.tools.overlay.addEffect("slide",
		function(pos, onLoad) {
			var conf = this.getConf(),
				 w = $(window);				 
				
			if (!conf.fixed)  {
				pos.top += w.scrollTop();
				pos.left += w.scrollLeft();
			} 
				
			pos.position = conf.fixed ? "fixed" : "absolute";
			this.getOverlay().css(pos).slideDown(conf.speed, onLoad); 
			
		}, function(onClose) {
			this.getOverlay().slideUp(this.getConf().closeSpeed, onClose); 			
		}		
	);
	
	$("#example img[rel]").overlay({
		effect: "slide", // 任意のカスタムエフェクト名を指定
		mask: "#789"
	});
});