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

LightBoxを使用する際はprototypeやらjQueryなどjavaScriptライブラリを使うことがほとんどでした。
もっと間単!軽く!という希望をかなえたのが、今回のtinyboxでしょう。
ライブラリなしの軽量LightBox風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">パターン 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>

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

sponsors

「ライブラリなしの軽量LightBox風JavaScript「tinybox」」をシェアする

記事作成:
記事URL:

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