Lightbox風のスクリプト jQuery Superbox!

Category
： Javascript

jQuery Superbox! はLightbox風の jQuery のプラグインです。

画像以外にも Content iframe を呼び出す事が出来るので、簡単な解説をしておきます。

jQuery Superbox! 使い方・ダウンロード

jQuery Superbox!の「Donwload jQuery Superbox! 0.9.1 (zip) 」から一式ダウンロードしてくる事が出来ます。

head内

<link rel="stylesheet" href="jquery.superbox.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.superbox.js"></script>
<script type="text/javascript">
	$(function(){
		$.superbox.settings = {
			closeTxt: "Close",
			loadTxt: "Loading...",
			nextTxt: "Next",
			prevTxt: "Previous"
		};
		$.superbox();
	});
</script>

jquery.superbox.css jquery.superbox.js は任意のパスにして下さい。

CSS

/* superbox 背景の色
---------------------------------------- */
#superbox-overlay{background:#e0e4cc;}

/* superbox ローディング画像呼び出し
---------------------------------------- */
#superbox-container .loading{width:32px;height:32px;margin:0 auto;text-indent:-9999px;background:url(styles/loader.gif) no-repeat 0 0;}

/* superbox closeボタン
---------------------------------------- */
#superbox .close a{float:right;padding:0 5px;line-height:20px;background:#333;cursor:pointer;}
#superbox .close a span{color:#fff;}

/* superbox next　prev要素指定
---------------------------------------- */
#superbox .nextprev a{float:left;margin-right:5px;padding:0 5px;line-height:20px;background:#333;cursor:pointer;color:#fff;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}

/* コンテンツ要素
---------------------------------------- */
#superbox #column	{ text-align: left; }
#superbox #column h2	{ 	
	font-size: 116.6%;
	border-bottom: solid 1px #646464;
	padding: 5px;
	margin-bottom: 10px;
}

superbox 背景の色、ローディング画像呼び出しや closeボタンなどの要素上記 CSS の様に好きな用に指定して下さい。

superbox を呼び出す HTML はデモページを参考にして下さい。

尚、自分の環境化では IE6 の挙動は上手くいっていませんでした。