ライブラリなしの軽量LightBox風JavaScript「tinybox」

LightBoxを使用する際はprototypeやらjQueryなどjavaScriptライブラリを使うことがほとんどでした。
もっと間単!軽く!という希望をかなえたのが、今回のtinyboxでしょう。

sponsors

使用方法

tinyboxからtinybox.jsをダウンロードします。

<script src="tinybox.js" type="text/javascript"></script>
<style>
#tinybox {
	position:absolute;
	display:none; 
	padding:10px; 
	background:#fff url(ローディング画像) no-repeat 50% 50%; 
	border:10px solid #e3e3e3; 
	z-index:2000}
#tinymask {
	position:absolute; 
	display:none; 
	top:0; 
	left:0; 
	height:100%; 
	width:100%; 
	background:#000; 
	z-index:1500}
#tinycontent {background:#fff}
</style>
上記を記述したらLightBox風にしたい画像やコンテンツを記述します。

<p id="demo1">パターン	1</p>
<p id="demo2">パターン	2</p>
<p id="demo3">パターン	3</p>
そして最後に上記のidにあわせてJavaScriptを書き込みます。

<script type="text/javascript">
	T$('demo1').onclick = function(){TINY.box.show('読み込むhtmlなど',1,300,150,1)}
	var content2 = "<img src='読み込む画像' width='298' height='373' />";
	T$('demmo2').onclick = function(){TINY.box.show(content2,0,0,0,1)}
	var content3 = "3秒で消える設定";
	T$('demo3').onclick = function(){TINY.box.show(content3,0,0,0,0,3)}
	//パラメーター紹介(読み込みコンテンツ,toggleかどうか,幅,高さ,ウィンドウのtoggle,消える時間)
</script>

サンプル

Advanced Features - click here
Image - click here
Auto-Hide - click here

sponsors

Javascriptサンプルページ一覧
skuare.net