- Frameboxとは？
-
Lightbox の iframe版です。
以下のことが可能です。
- HTML内で、aタグに rel属性を追加するだけで、リンク先のページをLightbox風に表示。
- 動作環境
-
- パッケージ内容
-
- js/framebox.js
-
本体の Javascriptファイル
- js/*.js
-
prototype.js と script.aculo.us の Javascriptファイル
- css/framebox.css
-
CSSスタイルシートファイル
- images/*
-
UI画像ファイル
- 注意事項
-
- 本ソフトウェアの利用は良識の範囲内でお願い致します。
- 本ソフトウェアの利用による損害の保証はお受けできません。
- 本ソフトウェアの利用は楽しんで行っていただきますようお願い致します。
- インストール方法
-
-
Framebox は Prototype Framework と Scriptaculous Effects Library を使います。
下記3つのJavascriptファイルを、ヘッダ部分にインクルードしてください。
（この順番で。）
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/framebox.js"></script>
-
Framebox CSS ファイルもインクルードしてください。
（既存のスタイルシートに Framebox のスタイルを追加することもできます。）
<link rel="stylesheet" href="css/framebox.css" type="text/css" media="screen" />
CSSから参照されている prev.gif と next.gif が正しい場所にあるか確認します。
また、framebox.jsの先頭部分で参照されている loading.gif と closelabel.gif が
正しい場所にあるかも確かめてください。
- 利用方法
-
- rel="framebox" を任意のリンクタグに追加すると framebox が有効になります。
-
- 例
-
<a href="page1.html" rel="framebox" title="my caption">page #1</a>
Tips
- キャプションを表示したければ、title属性も使えます。
- グループ化して表示したいリンクがあるときは、rel属性に "[" と "]" で囲んだグループ名を追加します。
-
- 例
-
<a href="page1.html" rel="framebox[roadtrip]">page #1</a>
<a href="page2.html" rel="framebox[roadtrip]">page #2</a>
<a href="page3.html" rel="framebox[roadtrip]">page #3</a>
Tips
- 1ページあたりのグループ数や、1グループあたりのリンク数に制限は
ありません。
- 更新履歴
-
- 2008/09/05
-