lightbox.js-使い方と微妙なハック

lightbox.js-ユーザビリティー向上?」ではWordPressでの詳しい使い方を説明しなかったので、改めて書いておきます。

  1. lightbox.jsのDownload下にあるファイルをすべてダウンロード
  2. lightbox.jsの36行目付近の画像ファイルの指定でフルパスを入れる
  3. WordPressをインストールしたフォルダ下にlightboxフォルダを作成
  4. 1でダウンロードしたファイルすべてを作成したフォルダにアップロード
  5. 使用しているテーマのheader.phpを開き、<head>と</head>の間のどこかにこちらのコードをコピー&ペースト
  6. 画像ファイルへリンクしているaタグにrel="lightbox"を追加

以上で使えるようになるはずです。まちがいがありましたら教えてくださいな。

そのまま使用するとページの一番上(<body>タグのすぐ下)にdivが作られますが、それが気持ち悪いと言う方は以下のお手軽ハックを使用してください。
lightbox.jsの268行目を変更します。
objBody.insertBefore(objOverlay, objBody.firstChild); // 変更前
objBody.insertBefore(objOverlay, objBody.lastChild); // 変更後

関連記事:
lightbox.js-WordPressプラグイン版
lightbox.js-ユーザビリティー向上?

TrackBack URIhttp://bd.dotted.jp/archives/36/trackback/

2 Comments

  1. no.1 mobcov Says:
  2. いつも参考にさせてもらっています。
    さて、lightbox自分もWPで使おうといじってたんですが、なかなかうまいこと行きませんでした。
    しかしながら、WP用のlightboxプラグインを見つけたので、これで一発インストールでしたよ。
    lightboxプラグインですが、何とlightboxのDLページの下の方で紹介されていたのでした(灯台もと暗し…)
    他にもlightbox_plusとか紹介されてました。

  3. no.2 Kaira Says:
  4. mobcovさんこんにちは。
    有益な情報ありがとうございます :D
    WordPress用のlightboxプラグインはこのエントリーを書いた翌日にリリースされたようですね。その後見ていなかったので気が付きませんでした。
    今後ともよろしくお願いします :)

Leave a Reply