Litebox と Lightbox

Komainu

以前、巷で評判のLightboxを入れていました。WordPressの場合、Lightboxの導入を簡単にしてくれるプラグインが幾つか有ります。見た目も格好よくて、まさに今風って感じなのですが、大きな問題点が1つ。読み込む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には、下のほうに3箇所。litebox-1.0.js(192行目)lightbox.js(275行目)にはそれぞれ1箇所ずつあります。

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

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

[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に記されているこれらの画像ファイルへのパスが間違っている可能性が高いです。ディフォルトでは相対パスで指定されています。もしも画像ファイルを置く場所を変えたりしたのであれば、ここを修正してください。場所は53行目と54行目のあたりです。

[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]

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

2 Replies to “Litebox と Lightbox”

  1. litebox JS v2.0 ~次世代らしい画像の表示…

    WordPressをインストールしたら真っ先に試したくなるのが「litebox」ではないでしょうか?
    サムネイル画像をカッコ良く表示するためのプラグインです。(厳密に言えばプラグインではあり….

  2. [wordpress]WordPressにlitebox-1.0を入れました。…

    画像のサムネイルをクリックすると、びよーんとメイン画像が現れてきます。 かなりcool。 liteboxがあって、lightbox2もある。 lightbox1もあります。 わけわかりませんw 色々と調べた結果、l…

Comments are closed.