デモ:オーバーレイにアップルエフェクトプラグイン

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;
	padding: 30px;
	width: 480px; /* 横幅のサイズ指定が必要・縦幅は自動計算してくれる */
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/tool/whitebox.png) no-repeat; /* 背景画像の指定が必要っぽい */
}
#example .close{
	position: absolute;
	bottom: -15px;
	right: 35px;
	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({
		effect: "apple"  // アップルエフェクトを指定
	});
});