ほぼ日 – 気まぐれカメラのソースを覗いてみたら、
『Litebox』という定番のスクリプトらしい。なるほどねー。
せっかくなので、勉強がてら、導入してみた。
Liteboxのオフィシャルはこちら。
Litebox – Same great taste, fewer calories
導入は極めて簡単で、
ページ内で書かれているとおり、
- <head>タグ内にcssとjsへのリンクを記述する。
- <body>タグに、『onload=”initLightbox()”』を追加する。
- 画像にリンク（ポップアップ内で表示させたい画像）を貼り、<a>タグ内に、『rel=”lightbox”』を設定する
という3段階。
1. <head>タグ内にcssとjsへのリンクを記述する。
基本的には、これをそのまま貼り付ければOK。<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>僕の場合は、ルート直下のliteboxディレクトリにまとめて格納したので、
<link rel="stylesheet" href="/litebox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/litebox/js/prototype.lite.js"></script>
<script type="text/javascript" src="/litebox/js/moo.fx.js"></script>
<script type="text/javascript" src="/litebox/js/litebox-1.0.js"></script>という感じになります。
注意点としては、ポップアップ時に使用される画像（閉じるボタンとか）のリンクも
設定しておくこと。
litebox-1.0.jsに、画像ディレクトリと、閉じるボタンの設定があるので、
環境に合わせて調整を。
2. <body>タグに、『onload=”initLightbox()”』を追加する。
これはまんま、貼り付け。3. 画像タグを設定する。
基本は、オフィシャルにあるとおり。<a href="images/image-1.jpg" rel="lightbox[example]" title="Horses"><img src="images/thumb-1.jpg" width="100" height="40" alt="Beautiful Horses" /></a>ポイントは、3つ。
- 元々表示しておく画像をimgタグ内に記述。
- 画像にリンクを設定し、クリック後表示したい画像を、aタグに記述。
- aタグに『rel=”lightbox”』を追加。複数の画像をまとめたいときは、『rel=”lightbox[グループ名]”』と記述する。
これらを、やりたいことに合わせて設定するだけ。
これらの下準備をしておけば、
こんな感じで表示できます。
なるほどねー。
CSS（lightbox.css）をいじったり、
画像を差し替えたりしてやれば、
さらに感じが変わるかもしれませんなー。
追記
ちなみに、小粋空間さんのところで、liteboxをMovableTypeで使う、ということで、
lightbox.cssやlitebox-1.0.jsをインデックステンプレートにして、
画像アドレスが階層で変わらないように、ということをやってます。
小粋空間: Litebox 1.0 をブログに適用する
いやでも、そこまでやらんでも、
絶対パスで書けばいいだけなんじゃないの、
とか思っちゃう僕はきっと怠け者なんだろねー
幸いうちはディレクトリ構造がシンプルなのか、
上記で問題なく動いてます。
あと、bodyにonloadを追加するのが微妙に面倒だったんですが。
そっか、</body>直前で呼び出すっていう方法があるのかー。
なるほどね。
