THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
Thickbox
jquery
javascript
ThickBox sample

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

※ 2008/05/09追記

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

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

ThickBox?


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

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

ハムロゴ

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

ThickBoxを使うためには?


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

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よりも前に読み込むように指定するようにしてください!

参考サイト:
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/90296109

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

SeeSaaでThickBox3
Excerpt: ThickBoxとはなんぞや という人は、コチラをごらんください マイコミジャーナル - ゼロからはじめるThickBox 3 簡単に言うと、画像をクリックしたら、画面ににょっと現れるJav..
Weblog: Junk
Tracked: 2008-07-05 17:16

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。