2011年08月27日

Lightbox2のcloselabel.gifへのリンク

 ふと「Lightbox2」のサイトを覗いてみたら、3/18/2011付けの最新バージョンがv2.05になっており、内容は、
>Upgraded Prototype (now works in IE9) and Scriptaculous. Minor bug fixes.
とのこと。
 IE9をまだ使っていないので、過去のバージョンで実際にどんな不具合が発生するかよく分からないのですが、Lightboxを使っているサイト(一部ではLightbox2どろか、1.0)では、切り替えることにしました。
 そして新しいスクリプトに置き換えると、PREVやNEXT、CLOSEの画像表示が出ないという問題が発生しました。
 PREVやNEXTについては、ファイルの相対位置を確認して表示できるようになったのですが、CLOSEがなかなかうまくいきません。PREVやNEXTと違い、lightbox.jsの中で指定され、
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
と記述されています。一体どのファイルを基準とした相対位置なのか・・・。
 すでに設置済みの自分のサイトで調べると、
http://hogehoge.com/..../images/closelabel.gif
と絶対指定をしていました。



 web上を探すと、同じような疑問と対応をしているケースがいくつも見つかりました。いろいろなところに、closelabel.gifを置いてみましたが、表示されません。

 作者はどういうつもりなのか・・・・。くやしいので、調べてみました。
作者のサンプルでは、
スクリプト:
http://www.huddletogether.com/projects/lightbox2/js/lightbox.js
HTMLファイル:
http://www.huddletogether.com/projects/lightbox2/index.html
closelabel.gifファイル:
http://www.huddletogether.com/projects/lightbox2/images/closelabel.gif
となっています。

 つまり、サムネールを表示するくHTMLファイルと同じ位置に'images/closelabel.gif'を置くのがデフォルトのようです。
 実際にこうなります。



 確かに、closelabel.gifが表示されます。

なお、上のサンプルはiframeで表示しています。読み込んでいるファイルは、
http://qp.jpn.org/lightbox.html
です。

一つ下の階層に同じファイルを置いてみます。
http://qp.jpn.org/etc/lightbox.htmlです。
そして、同じ階層にimageフォルダーを作って、
http://qp.jpn.org/etc/images/closelabel.gifを置きます。区別ができるように赤い文字を使いました。



 この通り、closeの文字が表示されます。

 つまり、lightboxの各種設定ファイルをデフォルトで使うには、
1 imageフォルダーをhtmlファイルと同じ階層(レベル)に置き、closelabel.gifとloading.gifを中に入れておく。異なる階層にhtmlファイルを置くならば、それぞれにimageフォルダーと2つのファイルを用意する。
2 PREV/NEXTの画像は、lightbox.cssを基準に、
(../images/prevlabel.gif)
(../images/nextlabel.gif)
の位置に置けば良いので、htmlファイルがどこにあっても構わない。

 結局、デフォルトで置こうとすると1の方が煩わしいので、
lightbox.jsの中では、
fileBottomNavCloseImage: 'images/closelabel.gif',
となっているのを、
fileBottomNavCloseImage: 'http://hogehoge.com/..../images/closelabel.gif',
と書き換えた方が、汎用性が生まれ、いちいちclose表示の画像ファイルを置く手間が省けることになります。


posted by kewpie at 23:09| Comment(0) | TrackBack(0) | ファイル作成
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/47586530
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。