Litebox 1.0を導入

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

7月にマーキングしたまま放置していたLiteboxですが、漸く導入したので導入時の作業内容を覚書。以前のLightbox JS v2.0を導入してみたの他には注意するところも無いのですが、document.writeでの記述が無くなっているのがありがたい。スクリプトの修正を行うことなくストレートに導入できました。

提供されたソースの修正

とりあえずディレクトリの配置とかは個人の趣味なので置いておくとして、オリジナルのソースを書き換えた部分を差分にするとこんな感じです。

$ diff litebox-1.0.js.org litebox-1.0.js
23,24c23,24
< var fileLoadingImage = "images/loading.gif";
< var fileBottomNavCloseImage = "images/closelabel.gif";
---
> var fileLoadingImage = "http://cefa.sakura.ne.jp/pixmaps/litebox-1.0/loading.gif";
> var fileBottomNavCloseImage = "http://cefa.sakura.ne.jp/pixmaps/litebox-1.0/closelabel.gif
";

物理配置したオブジェクトの呼び出し時にフルのURLで記述しておかないと、呼び出し元が変動する場合(例えばブログであればインデックスとパーマネントとアーカイブで階層が異なる)には一定の動作が保証されません。

$ diff lightbox.css.org lightbox.css
48c48
<       background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing
hover */
---
>       background: transparent url(../../pixmaps/litebox-1.0/blank.gif) no-repeat; /* Trick
IE into showing hover */
53,54c53,54
< #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 1
5% no-repeat; }
< #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right
15% no-repeat; }
---
> #prevLink:hover, #prevLink:visited:hover { background: url(../../pixmaps/litebox-1.0/prevl
abel.gif) left 15% no-repeat; }
> #nextLink:hover, #nextLink:visited:hover { background: url(../../pixmaps/litebox-1.0/nextl
abel.gif) right 15% no-repeat; }

一方CSSはそれ自体が物理的に固定した位置に存在しますので相対指定でOKです。

テンプレートの修正

基本的にはUsageの通りです。

body要素の属性に onload="initLightbox()" を追記します。但し個別エントリーアーカイブに追加する時には、コメント呼び出し様の関数呼び出しがありますので次のようにします。

<body onload="individualArchivesOnLoad(commenter_name);initLightbox();">

Lightbox JSを組み込んだのだけれどでのindividualArchivesOnLoad呼び出しタイミングの問題は、Litebox 1.0組込みの際には該当しないようです。

次にhead要素の中に次の記述をします。lightbox.cssの呼び出しはメインで使っているCSSより後にしましょう。パスは私の設定内容をそのまま記述しているので人によってそれぞれです。

<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles/litebox-1.0/lightbox.css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>scripts/litebox-1.0/litebox-1.0.js"></script>

後はimg要素記述時にrel属性を付けてやって…という部分ですが、基本的にはLightbox JSを組み込んだのだけれどと同じモディフィケーションで問題ありません。タイトルを付ける場合にはtitle属性を付けてやるだけでOKです。

サンプル

オフィシャルのサンプルをそのまま転載してみます。

参考URL
Litebox- Same great taste, less calories