skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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">パターン １</p>
<p id="demo2">パターン ２</p>
<p id="demo3">パターン ３</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>

ライブラリなしの軽量LightBox風JavaScript「tinybox」　サンプル

記事作成：2009年05月27日

前の記事：簡単・軽量の吹き出しJavaScript「vTip」
次の記事：スライドするメニューをJavaScriptで作る「Sliding JavaScript Menu Highlight 1kb」