Tumblr
Programing
greyboxも導入してみた。 - 同一画面内での画像/ページポップアップ
と言うわけで、画像をポップアップできるスクリプト、
『litebox』を導入してみたのだけど、
画像だけじゃなくて、ページをポップアップさせたくなったとしたらどうだろう？
というわけで、ついでってことで、それを実現するスクリプト、
『greybox』も導入してみる。
さっきはlightで、今度はgrey。
君ら、箱が好きなのか。
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つのパターン。- 画像を1枚表示する
- 画像をグループで表示する（メニュー付き）
- ページを1ページ表示する
- ページをグループで表示する（メニュー付き）
仕様、サンプル共に上のページにあるので、
それを参考にしてやれば、こんな感じ。
1. 画像1枚表示する
2. 画像をグループで表示する（メニュー付き）
もちろん、アルバムチックにも。
3. ページを1ページ表示する
ページは…こうかな。
4. ページをグループで表示する（メニュー付き）
グループなら…
上手く行ってますね。
ちなみに、liteboxと共存させることも可能ですが、
bodyタグにonloadを指定してると、読み込みの順番なのか、
上手く動きません。
liteboxの記述を、小粋空間さんで例示されていたように、
</body>タグの直前に置くと、これを回避できるようです。
ま、詳しくないんで適当ですけれども。
そんな感じで。
Related Entries
-
liteboxを導入してみた。 - 同一画面内での画像ポップアップ
4, Sep 2007
-
goosh.org - シェル風に検索を。
17, Sep 2008
-
mixiデザインリニューアル。
7, Jul 2008
-
トリンプのおねだり機能に感動した
18, Mar 2010
-
【前言撤回】MySpaceでもCoolなデザインのページは作れます。
14, Mar 2010
Ad
flick
Copyright © 1998-2010 NOBODY:PLACE All Rights Reserved.