最近、ウエブサイトでおしゃれなホップアップを見かけます。
どうなっているのかと調べてみると、
* LightBox http://www.huddletogether.com/projects/lightbox2/
* GreyBox http://orangoo.com/labs/?page_id=5
* ThickBox http://jquery.com/demo/thickbox/
のようなライブラリがみつかった。
LightBoxは画像を対象にしているのに対して、ThickBoxやGreyBoxはURLを指定して、コンテンツを全てBox表示する事はできるらしい。
今回はGreyBoxを使わせて頂き、リンク先の他のページを表示してみることにした。
ますは次のとこらからダウンロードする
http://orangoo.com/labs/GreyBox/Download/
ダウンロードしたZIPファイルを解凍すると色々なフォルダやファイルがあるが、とりあえず必要な物はgreyboxフォルダであるので、これをドキュメントルートに配置する。
GreyBoxは非同期通信とエフェクト処理、スライド処理を行う3つのファイルに分かれているので、
greyboxフォルダのパスを指定した後に、実際に処理を行う3つのファイルを以下のように順番に読み込ませる必要がある。
つまり、greyboxを使いたいhtmlファイルのhead部分に次の記述をする。
------------------------------------------------
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
--------------------------------------------------
スタイルシートファイルも読み込ませる必要があるので、greyboxフォルダ内にあるgb_styles.cssの読み込む。
---------------------------------------------------
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
---------------------------------------------------
これで準備完了。
後は表示させていページを<a>タグのrel属性にrel="gb_page[横幅, 縦幅]"を指定する。
横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値である。
----------------------------------------------
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page[480,360]">〜</a>
----------------------------------------------
上記の場合ウィンドウは上部に表示されるが、ウィンドウの中央に表示させることもできる。
この場合は<a>タグのrel属性にgbpagecenter[横幅, 縦幅]を指定しする。
-----------------------------------------------
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page_center[480,360]">〜</a>
-----------------------------------------------
また、指定したサイズではなく、ウィンドウサイズに合わせて最大で表示することもでる。この場合は<a>タグのrel属性にgbpagefs[]を指定する。
そして、ウィンドウをリサイズした場合でも自動的に最大になるように調整が行われます。
-----------------------------------------------
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page_fs[]">〜</a>
-----------------------------------------------
そして、ウィンドウに表示されるページをグループ化して扱うこともできる。この場合は<a>タグのrel属性にgb_pageset[グループ名]を指定する。
グループ名は任意の文字列を指定し、複数の異なるグループ名を指定した場合、それぞれ別のグループとして処理される。
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<title>Sample</title>
<link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all">
<script type="text/javascript"><!--
var GB_ROOT_DIR = "./greybox/";
// --></script>
<script type="text/javascript" src="greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/gb_scripts.js"></script>
</head>
<body>
<h1>GreyBox グループ表示サンプル</h1>
<ul>
<li><a href="
http://kumao.net/" title="kumaoの押入" rel="gb_pageset[favPage]">kumaoの押入のページ表示</a>
</li>
<li><a href="
http://www.ayumi.cn/" title="アユゴンの部屋" rel="gb_pageset[favPage]">アユゴンの部屋のページ表示</a>
</li>
<li><a href="
http://blackwidow.bgrp.jp/" title="マリネルス峡谷の対決" rel="gb_pageset[favPage]">マリネルス峡谷の対決のページ表示</a>
</li>
<li><a href="
http://kmp.bgrp.jp/" title="KINUGASA MOTION PICTURES" rel="gb_pageset[favPage]">KINUGASA MOTION PICTURESのページ表示</a>
</li>
</ul>
<h1>GreyBox 上部表示サンプル</h1>
<ul>
<li>
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page[480,360]">kumaoの押入（上部表示）</a>
</li>
</ul>
<h1>GreyBox 中央表示サンプル</h1>
<ul>
<li>
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page_center[480,360]">kumaoの押入（中央表示）</a>
</li>
</ul>
<h1>GreyBox 最大表示サンプル</h1>
<ul>
<li>
<a href="
http://kumao.net/" title="kumaoの押入" rel="gb_page_fs[]">kumaoの押入（最大表示）</a>
</li>
</ul>
</body>
</html>
------------------------------------------------------
GreyBoxは必要なファイルが greyboxフォルダにまとめられているため、他のプログラムファイルやスタイルシートファイル名と干渉しないのでよい。
次回は画像表示も試してみたい。
最近のコメント