アップロードした画像を自動的にThickBoxで表示

2008/03/21

カテゴリ：: jQuery plugin紹介

タグ：: javascript; jquery; Thickbox

画像を綺麗に表示したいなーって思ったので、
jQueryを使って、画像へのリンクを
ThickBoxで表示するようにしてみました。

※　2008/05/09追記

現在はLightBoxで自動表示されるように変更してあります。

参照：続：画像を自動的にLightBoxで表示するようにした

ThickBox？

ThickBoxは、jQueryのプラグインの一で、
この記事の一番上に載せた写真のように
画像を綺麗に表示させるためのものです。

ためしに、このハムロゴの画像をクリックしてみてください。

JavaScriptが有効になっている環境であれば、
ほとんどのブラウザで、画像が画面中央に出てくるようになっています。

ThickBoxを使うためには？

ThickBoxとjQueryをそれぞれのサイトからダウンロードしてきて、以下のように設定します。

head内に

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

path-to-fileには保存した場所を指定。

cssもダウンロードしてきて、コレを加えます。

<link rel="stylesheet" href="path-to-file/thickbox.css"
 type="text/css" media="screen" />

あとは画像を貼り付ける際に、下記のようにしておく。

<a href="画像へのリンク" class="thickbox"><img src="画像" /></a>

これで完了です。

自動的に画像をThickBoxで見るために

わざわざ画像のリンクにclass="thickbox"なんてつけるのは面倒です。
なので、コレを自動的につけてもらうようにしましょう。
以下のコードをコピーして、適当な名前をつけて保存。

$(document).ready(function(){		
    $('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]')
    .addClass("thickbox");
});

これは、リンク先がjpg、gif、pngの時は
リンクにclass="thickbox"をつけるようにしているもの。

あとは、jquery.jsよりも後、thickbox.jsよりも先に読み込むようにする。

<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="###.js"></script>
<script type="text/javascript" src="path-to-file/thickbox.js"></script>

###には、保存したファイルを指定。

以上で画像へのリンクを自動的にThickBoxで開いてくれる。

ちょっと注意

thickbox.jsを読み込んだ時点で、
class="thickbox"になっているものの画像が
動作するようになっているので、
自動的にclass="thickbox"をつけたものを動作させるには、
必ずthickbox.jsが読み込まれるよりも前の段階で
class="thickbox"をつけなければならない。

なので、必ず今回のスクリプトは
thickbox.jsよりも前に読み込むように指定するようにしてください！

参考サイト：