デモ:最小セットアップ

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: #eee;
	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();
});