[WordPress]Lightbox JS 2.2を導入してみる

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

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

プラグインをダウンロードして解凍すると(写真のしたにあるJust downloadからダウンロードできます)、lightbox2.phplightboxフォルダができるので、これをそのまま/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表記に変更してみたところ、ばっちり表示されました。

7 thoughts on “[WordPress]Lightbox JS 2.2を導入してみる

  1. ピンバック: RGBlog v2.0

  2. 助かりました。やっと表示できるように。:)
    でも,[Prev],[Next]表示させるには lightbox.css の方も絶対アドレスに直す必要があるようです。

  3. ピンバック: 3xs

  4. 大分たってるのでもう分からないかもしれませんが…
    ダウンロードしたところ。
    「lightbox2.php」
    がありません。
    「lightbox.php」
    ならあるんですけどこれですか?
    ファイル名をかえる必要がありますか?

  5. ピンバック: Lightbox 2 Wordpress Plugin « Graffiti Capsule

フォームは コメントしてほしそうに こちらを見ている……!

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください