かなり普及してきたのでいまさらな感じではありますが、WordPressにLightbox JS 2を導入してみました。

JavaScriptなのでそのまま本家の導入方法でもよいのですが、ヘッダをあれこれ書き換えるのが面倒だったのでプラグインでいってみます。今回使ったのはLightbox 2 WordPress Plugin（そのまんま）。

プラグインをダウンロードして解凍すると（写真のしたにあるJust downloadからダウンロードできます）、lightbox2.phpとlightboxフォルダができるので、これをそのまま/WordPressインストールフォルダ/wp-content/plugins/にアップロードします。

プラグインの作業はこれで完成。あとは記事の投稿の際に、画像にリンクするaタグに
rel=”lightbox”
をつけてやればOK。画像をクリックするとLightboxが動作します。

画像をスライドショーのように、クリックするたびに次々と切り替えることもできます。これは画像にリンクするaタグに
rel=”lightbox[roadtrip]”
とつけてやればOK。これがついている画像だけを連番に読み込みます。

…通常はこれで問題ないようなのです……。んが！私の場合は動作はするのですが、画像を読み込んだ際の「CLOSE ×」画像が表示されませんでした。

おそらく「CLOSE ×」画像へのパスが間違っているのだろうと判断して、lightbox.js（/wordpressインストールフォルダ/wp-content/plugins/lightbox/に入っています）の61行目～62行目

var fileLoadingImage = "/wp/wp-content/plugins/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "/wp/wp-content/plugins/lightbox/images/closelabel.gif";


を

var fileLoadingImage = "http://www.yourwebsite.com/wordpressインストールフォルダ/wp-content/plugins/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "http://www.yourwebsite.com/wordpressインストールフォルダ/wp-content/plugins/lightbox/images/closelabel.gif";


とhttpから始まるURL表記に変更してみたところ、ばっちり表示されました。