Thickboxを入れてみる

twilight2_1.jpg

画像のポップアップ表示に以前LightBoxを利用していました(LightBoxサイト)。写真を開くときの動きとか見た目はこっちの方がかっこ良かったりするんですが、写真以外にテキストやページを表示できる多機能さに期待してThickBox2.1を導入してみました。上のサムネールをクリックすると同一ウィンドウ内にオーバーレイで画像が表示されます。

ThickBox 2.1

これのコアとなっているJavascriptライブラリのJquery自体もかなりいろいろできる感じで、正直そっちの方に興味があってThickBoxを選んだところもあるんです。

Jquery : Javascript Libraly

  • まずThickBox 2.1のサイトにて、ThickBox.jsThickBox.css、それとローディングアニメーション用のgifファイルをダウンロード。あわせてJquery.jsもダウンロード。
  • wordpressのディレクトリ配下にダウンロードしたファイルをアップロードするのですが、今回はThickBox.jsJquery.jsを新たに作ったjs/ディレクトリに、ThickBox.cssも新たにcss/というディレクトリを作ってアップロード。基本的にこれらの3ファイルは後で読み込み先を指定するのでどこでもかまいません。
    ローディング用のgifファイルloadingAnimation.gifimage/ディレクトリを作りその中にアップロード。
    - 続いて、WordPressの管理画面、表示→テーマエディタでヘッダーを呼び出して編集、以下の3行を加えます。

[HTML]

[/HTML]

path_toの部分は先ほど用意したディレクトリ名となります。

以上で準備は完了。後は画像へのリンクを張る際に、

[HTML]

[/HTML]

という風にclass="thickbox"を指定してやるだけです。

このエントリーをはてなブックマークに追加
はてなブックマーク - Thickboxを入れてみる
Facebook にシェア
[`google_buzz` not found]
[`yahoo` not found]
[`livedoor` not found]
[`friendfeed` not found]
[`tweetmeme` not found]

スポンサーリンク