Lightbox JSを使うときの覚え書き
サイトの制作によっては、スクリプトファイル、画像、CSSなどをそれぞれ独自の仕様で構成する場合があります。現にこのサイトも共通ディレクトリを作って、画像、SWF、スクリプト、CSSというきりわけをしています。メリットはというと、単に管理がしやすいということと、ドキュメントルート以下のディレクトリの整理、つまりHTMLによって呼び出されるファイルを一箇所にまとめておくことにあります。
そしてCMSなどを使用すると、相対パスによるファイルのしては結構ややこしいものになります。だから絶対パス指定にするときに、組みやすいものにするということが挙げられます。
CMS同様JavaScriptライブラリもこうした制作者側の都合を考慮はしてくれないため、こちらでいくつか変更する必要があります。
今回はLightboxの場合だ。FirefoxのアドオンFirebugを使って調べてみました。
まずCSSディレクトリのlightbox.cssの16行目（#prevLink:hover, #prevLink:visited:hover）、17行目（#nextLink:hover, #nextLink:visited:hover）に注目する。これはスライドショー機能の際に使用されるCSS。背景に指定されている画像のパスは正しいですか？
Lightboxディレクトリのimagesディレクトリを変更・移動したなら、ここの指定は変更する必要がある。私はめんどくさいので、絶対パス指定にします。
次に23行目、24行目に注目。これはキャプション、つまりCLOSEボタンの左横に表示される、いわゆる画像の説明を表示する領域のもの。CSSでブロックレベルタグを0で初期化している場合は、ここを編集する必要がある。
単純にline-heightを指定するだけだが、私は値を1.5emにしています。
これだけと思いたいのですが、何分私が使っているLightboxは古いため、最新バージョンのCSSの13行目（#prevLink, #nextLink）の背景画像の指定の仕方がわかりません。
ということで最新のlightbox.cssを以下に引用してみましたので、参考までに。