Komainu

以前、巷で評判のLightboxを入れていました。WordPressの場合、Lightboxの導入を簡単にしてくれるプラグインが幾つか有ります。見た目も格好よくて、まさに今風って感じなのですが、大きな問題点が１つ。読み込むjavascriptのファイルが大きい、つまり、サイトが重くなる事。更に、プラグインを使用するとどのページであろうと、所かまわず読み込みます。Aboutだろうが、Archivesだろうが・・・。

これらの理由で一時的にLightboxをはずしてました。でもやっぱり入れたいなぁと思ったので、プラグインを使用せずにLightbox JS v2.0を入れようと四苦八苦。上手くいったところで、MasayanさんはLiteboxに入れなおした事を発見。おおっ、そういう手があったのか、とこちらに乗り換え。Lightboxの時と全く同じ問題に直面しましたが、問題解決。Lightboxのトータル・ファイル・サイズ、110kbから、Liteboxの30.6kbへとスリムになった。

以下は、LightboxとLiteboxの両方で手こずった点。

フッタ部分の表示が崩れる

画像とタイトルと、「閉じる」ボタンが表示されるフッタ部分。このフッタ部分の表示が小さかったり、白色になったなかったりする問題は、CSSの問題です。このフッタ部分はclass="clearfix"ですが、これは良く使われるクラスで、テーマファイルの方にも使われていたりします。一番手っ取り早い解決方法は、Lightbox又はLiteboxのclass="clearfix"を、別のクラス名に変えます。例えば、class="clearfixLB"。Lightbox.css, litebox-1.0.js（Lightboxの場合lightbox.js)のファイル内でclearfixを検索してclearfixLB等に置き換えます。Lightbox.cssには、下のほうに３箇所。litebox-1.0.js（１９２行目）lightbox.js（２７５行目）にはそれぞれ１箇所ずつあります。

閉じる「x」とローディングの画像が表示されない

フッタ部分の表示が崩れる問題は有る・無しに関わらず、閉じる為の「close X」ボタンと、くるくる回る、ローディング中を示す画像が表示されない時があります。MovableTypeでも同様の問題があるそうで、WordPressを含むダイナミックにコンテンツを作成するCMSの類は全てこの問題が生じるのかもしれません。（もしくはサーバによる問題か？）解決方法は、code>litebox-1.0.js又はlightbox.jsで、これらの画像へのパスを、相対パスからURLに変更する事です。それぞれのファイルの「Configuration」欄、litebox-1.0.jsでは２１行目あたりから、lightbox.jsは６０行目あたりから、の以下の部分です。

[js]
var fileLoadingImage = “images/loading.gif”;
var fileBottomNavCloseImage = “images/closelabel.gif”;
[/js]

これらをそれぞれ「http://」から始まる、画像へのURLに変更します。（参考：Odysseygate.com » Blog Archive » [WordPress]Lightbox JS 2.2を導入してみる）

backとnextが表示されない

セットされた画像上でカーソルをホバーすると表示される「back」と「next」が表示されないのは、lightbox.cssに記されているこれらの画像ファイルへのパスが間違っている可能性が高いです。ディフォルトでは相対パスで指定されています。もしも画像ファイルを置く場所を変えたりしたのであれば、ここを修正してください。場所は５３行目と５４行目のあたりです。

[css]
#prevLink:hover, #prevLink:visited:hover { background: url(./images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(./images/nextlabel.gif) right 15% no-repeat; }
[/css]

おまけ：特定のページでのみ読み込む

LightboxからLiteboxに変えたとは言え、このエフェクトを使用することが無いページでも読み込むのは、はっきり言って無駄です。例えば、アーカイブスのページで使用することはまず無いと思います。そこでWordPressのコンディショナル・タグを使って条件分岐します。ここでは、ホームと個別記事を表示したときのみLiteboxを読み込むようにしてみました。

まず、Liteboxに必要なジャバスクリプトを読み込む箇所（header.php）をコンディショナル・タグで囲んでやります。

[php]

// –>

// –>

// –>

[/php]

更に、Liteboxの場合body onload=”initLightbox()”が必要なので、その箇所もコンディショナル・タグで囲みます。

[php]
>
[/php]

これで少しは軽くなるかと 😉