かなり普及してきたのでいまさらな感じではありますが、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表記に変更してみたところ、ばっちり表示されました。
4 個のコメント
imgタグに、relではダメでした。aタグにつけたら大丈夫でした。勘違いですか？
うわー、素で間違えてますね。ご指摘ありがとうございました！
修正修正φ(.＿.)
助かりました。やっと表示できるように。:)
でも，[Prev],[Next]表示させるには lightbox.css の方も絶対アドレスに直す必要があるようです。
大分たってるのでもう分からないかもしれませんが…
ダウンロードしたところ。
「lightbox2.php」
がありません。
「lightbox.php」
ならあるんですけどこれですか？
ファイル名をかえる必要がありますか？
3 個のトラックバック
覚書：LightBox設置後…
このブラグインは、けっこう以前からあるものだし、私も実際他サイトで使用ているので、今更書く事はないのですが…。ま、ちょっとだけWordPress用補足覚書メモです。この (more…)
WordPressカスタマイズ関係…
WordPressを設置して1週間程度。
大体環境が整ったと思うので参考にしたサイトや導入…
[...] 参考：[WordPress]Lightbox JS 2.2を導入してみる [...]