Programing

liteboxを導入してみた。 - 同一画面内での画像ポップアップ

4 Sep 2007

クリックして画像がポップアップされるスクリプトが気になったので、
ほぼ日 - 気まぐれカメラのソースを覗いてみたら、
『Litebox』という定番のスクリプトらしい。なるほどねー。

せっかくなので、勉強がてら、導入してみた。

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

Litebox - Same great taste, fewer calories

導入は極めて簡単で、
ページ内で書かれているとおり、

  1. <head>タグ内にcssとjsへのリンクを記述する。
  2. <body>タグに、『onload="initLightbox()"』を追加する。
  3. 画像にリンク（ポップアップ内で表示させたい画像）を貼り、<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つ。

  1. 元々表示しておく画像をimgタグ内に記述。
  2. 画像にリンクを設定し、クリック後表示したい画像を、aタグに記述。
  3. aタグに『rel="lightbox"』を追加。複数の画像をまとめたいときは、『rel="lightbox[グループ名]"』と記述する。

これらを、やりたいことに合わせて設定するだけ。

これらの下準備をしておけば、
こんな感じで表示できます。

MAY

なるほどねー。

CSS（lightbox.css）をいじったり、
画像を差し替えたりしてやれば、
さらに感じが変わるかもしれませんなー。


追記


ちなみに、小粋空間さんのところで、
liteboxをMovableTypeで使う、ということで、
lightbox.cssやlitebox-1.0.jsをインデックステンプレートにして、
画像アドレスが階層で変わらないように、ということをやってます。

小粋空間: Litebox 1.0 をブログに適用する

いやでも、そこまでやらんでも、
絶対パスで書けばいいだけなんじゃないの、
とか思っちゃう僕はきっと怠け者なんだろねー

幸いうちはディレクトリ構造がシンプルなのか、
上記で問題なく動いてます。


あと、bodyにonloadを追加するのが微妙に面倒だったんですが。
そっか、</body>直前で呼び出すっていう方法があるのかー。

なるほどね。

Ad

About

I'm a web designer/programmer in Kyoto, Japan. Also work as a blogger, DJ.

NOBODY:PLACE is my personal blog since 1998. Everything I'm interested in is here.

See Also

Other Works

Feed

Search

Monthly Archives