HOME>スポンサー広告

スポンサーサイト

Toolog.net
こちらのブログに移転しました。
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
HOME>【Webマスター向け】

FC2ブログにThickBoxを導入してみた

Toolog.net
こちらのブログに移転しました。

オーバーレイで画像を表示してみたいと思って、「ThickBox 3.1」を導入してみたよ! いろいろ調べてみた結果、ThickBox が一番軽量で、表示も速くてユーザビリティに優れているということなのでこれにしてみたよ。 画像をグループ化して表示できる機能がかなり便利!フォトブログとかで本格的に画像を公開している人にもおすすめ。

Thick Box 閲覧者側としての使い方

画像をクリックするとオーバーレイで大きい画像が表示されるよ。
そのままもう一度画面をクリックまたはESCキーを押すことで元の画面に戻るよ。
グループ化されている画像は左下のグループ化されている画像のページ切り替えができるよ。

FC2ブログに Thick Box を導入

  1. 以下のサイトから ThickBox 3.1
    • thickbox.js
    • ThickBox.css
    • loadingAnimation.gif
    • jQuery JavaScript library(jquery-latest.js)
    の 4つのファイルをダウンロード。
    といいたいところだけど、私の環境では jQuery JavaScript library(jquery-latest.js)がうまくダウンロードできず、txtファイルとしてダウンロードされてしまうので以下に置いておくよ。
    右クリック⇒対象をファイルに保存でダウンロードしてね。
    thickbox.js
    thickbox.css
    jquery-latest.js
    loadingAnimation.gif
  2. ダウンロードしたら、loadingAnimation.gifをアップロード。(FC2の場合は[管理画面]⇒[ツール]⇒[ファイルアップロード])
    完了したら、それを右クリックしてファイルのURLをコピー。
    WS000059.jpg
  3. thickbox.js をテキストエディタで開いて、 var tb_pathToImage = "http://blog-imgs-18.fc2.com/c/o/o/cooltoolz/loading.gif"; → "コピーしたURL" に書き換えてね。 (普通のHPで使う人は images/loading.gif
  4. ダウンロードしたほかのファイルも同じようにアップロード。
  5. テンプレートのHTML部分の</head>の直前に以下のタグを挿入する。
    「コピーしたURL2」の部分には先ほどのコピーしたURLのloadingAnimation.gif を除いた部分を挿入してね。
    例:私の場合は http://blog-imgs-18.fc2.com/c/o/o/cooltoolz
    <script type="text/javascript" src="http://コピーしたURL2/jquery-latest.js"></script>
    <script type="text/javascript" src="http://コピーしたURL2/thickbox.js"></script>
    <link rel="stylesheet" href="http://ブログのアドレス/thickbox.css" type="text/css" media="screen" />
    

    これまでで Thick Box の環境の導入は完了だよ。
    あとはブログで画像を書くときに以下の要領で class="thickbox" を挿入すればOK。

    <a href="http://domain/hogehoge.jpg" target="blank"><img src="http://domain/hogehoge.jpg" alt="hogehoge"border="0" /></a>
        ↓
    <a href="http://domain/hogehoge.jpg" class="thickbox"><img src="http://domain/hogehoge.jpg" alt="hogehoge"border="0" /></a>

    グループ化して表示したい方は、ひとかたまりの画像に rel="任意の英数" を追加すると以下のように、next と prev で画像をグループ化して表示できるよ。
    001.jpg
    002
    003

この記事のトラックバックURL

http://cooltoolz.blog5.fc2.com/tb.php/103-8c028c65

コメント

コメントする

管理者にだけ表示を許可する

Copyright ©CoolToolz All Rights Reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。