『litebox』を導入してみたのだけど、
画像だけじゃなくて、ページをポップアップさせたくなったとしたらどうだろう？
というわけで、ついでってことで、それを実現するスクリプト、
『greybox』も導入してみる。
さっきはlightで、今度はgrey。
君ら、箱が好きなのか。
greyboxのオフィシャルはこちら。
Orangoo Labs – GreyBox
liteboxに比べると、greyboxの方が、導入は簡単。
手順は以下。
- <head>タグ内に記述。
- リンクを設定する。
1. <head>タグ内に記述。
基本的に、オフィシャルの記述に従って、書けばOK。<script type="text/javascript">
var GB_ROOT_DIR = "http://mydomain.com/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>
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" />例によって僕の場合は、絶対パスで以下のように記述。
<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>
<link href="/greybox/gb_styles.css" rel="stylesheet" type="text/css" />2. リンクを設定する。
greyboxで実装できるのは次の4つのパターン。GreyBox – Normal usage
- 画像を1枚表示する
- 画像をグループで表示する（メニュー付き）
- ページを1ページ表示する
- ページをグループで表示する（メニュー付き）
仕様、サンプル共に上のページにあるので、
それを参考にしてやれば、こんな感じ。
1. 画像1枚表示する
2. 画像をグループで表示する（メニュー付き）
もちろん、アルバムチックにも。
3. ページを1ページ表示する
ページは…こうかな。Contact me.
4. ページをグループで表示する（メニュー付き）
グループなら…Contact me.
Launch Google.com
上手く行ってますね。
ちなみに、liteboxと共存させることも可能ですが、
bodyタグにonloadを指定してると、読み込みの順番なのか、
上手く動きません。
liteboxの記述を、小粋空間さんで例示されていたように、
</body>タグの直前に置くと、これを回避できるようです。
ま、詳しくないんで適当ですけれども。
そんな感じで。
