と言うわけで、画像をポップアップできるスクリプト、
『litebox』を導入してみたのだけど、
画像だけじゃなくて、ページをポップアップさせたくなったとしたらどうだろう?


というわけで、ついでってことで、それを実現するスクリプト、
『greybox』も導入してみる。

さっきはlightで、今度はgrey。
君ら、箱が好きなのか。

greyboxのオフィシャルはこちら。

Orangoo Labs - GreyBox

liteboxに比べると、greyboxの方が、導入は簡単。
手順は以下。

  1. <head>タグ内に記述。
  2. リンクを設定する。

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枚表示する
  2. 画像をグループで表示する(メニュー付き)
  3. ページを1ページ表示する
  4. ページをグループで表示する(メニュー付き)

仕様、サンプル共に上のページにあるので、
それを参考にしてやれば、こんな感じ。


1. 画像1枚表示する


MAY


2. 画像をグループで表示する(メニュー付き)


もちろん、アルバムチックにも。

あつ…


ちゃんぷるー
マンガフェスタ…
なに?
ベンガル フィッシュカレー他!
届いたよ。
今日は中辛
かつくら
名古屋ビール
タツロー
チバ
エムステ
買ってしまった…
福岡から来客☆
さくら
なんなんだろう…


3. ページを1ページ表示する


ページは…こうかな。

Contact me.


4. ページをグループで表示する(メニュー付き)


グループなら…

Contact me.
Launch Google.com

上手く行ってますね。


ちなみに、liteboxと共存させることも可能ですが、
bodyタグにonloadを指定してると、読み込みの順番なのか、
上手く動きません。

liteboxの記述を、小粋空間さんで例示されていたように、
</body>タグの直前に置くと、これを回避できるようです。

ま、詳しくないんで適当ですけれども。


そんな感じで。