Lightbox風のスクリプト jQuery Superbox!

Lightbox風のスクリプト jQuery Superbox!

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

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

demo page

…ここからが続き

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 の挙動は上手くいっていませんでした。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article