Webの記録

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

投稿日:

この記事は約 4 分で読めます。

今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。
・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁってコトでjQueryのライブラリ「thickbox.js」を使ってみました。

thickbox.jsを使って表示した画面イメージ

設置方法。

下準備♪

スライドしたい画像を数枚用意します。
サムネイル画像も表示したいので、同じ画像の大小を各1枚準備します。
今回は、5枚の画像のスライドショーを作るので、計10枚用意しました。

jsファイルのダウンロード。

ライブラリ配布サイト(http://jquery.com/demo/thickbox/)より「thickbox.js」、「thickbox.css」、「loadingAnimation.gif」をダウンロードする。
jQueryのサイト(http://jquery.com/)から「jquery-1.6.2.min.js」 (現在の最新)をダウンロードする。

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <script src="js/thickbox.js" type="text/javascript"></script>
body部分に記述。

aタグの方には、大きな画像のパスを記述。imgタグの中はサムネイル画像のパスを記述します。

<a class="thickbox" title="sample画像1" href="images/sample_img1.jpg">
<img src="images/sample_img1t.jpg" alt="sample画像1" /></a>

1枚ずつの表示だったら・・・ここまでで表示可能ですが、数枚の画像をまとめて見たい(グルーピングしたい)場合は、まだもう少しする事があります。

aタグの中にrel=”グループ名”を記述する。

※グループ名は複数の画像全て同じ名前にしておく。すると、大きな画像の下に「next」「Prev」のリンクが表示されて、1枚の画像から続けて複数の画像を見る事が出来るようになります。

<a class="thickbox" title="sample画像1" rel="gallery-plants" href="images/sample_img1.jpg">
<img src="images/sample_img1t.jpg" alt="sample画像1" /></a>

 

ここでブラウザ画面で確認すると、何故かグルーピングした場合だけ表示が出来ません。
どうやら、jQueryのバージョンによって、そのままで表示が出来るものと出来ないものがあるようです。
ちなみに私は、「jquery-1.6.2.min.js」と 「jquery-1.4.2.min.js」と両方試してみましたが、表示出来ませんでした。
・・・で、ググってみたところ解決策がありました。

 

「thickbox.js」を開いて、79行目のコードを修正します。

「TB_TempArray = $(“a[@rel=”+imageGroup+”]”).get();」の中の「@」を削除する。下記のように・・・。

TB_TempArray = $("a[rel="+imageGroup+"]").get();

 

jQueryのバージョンはどんどんあがっているのに「thickbox.js」の方がバージョンが止まっているのが原因ぽいようです。
今まで意識してませんでしたが、使う時にはバージョンによる表示状態をよく確認する必要があるみたいです。

 

-Webの記録
-, , , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ちょっと複雑なtableがコピペで簡単にできる「Table Tag Generator」

この記事は約 1 分で読めます。 滅多に複雑なtableタグを書くことがないのですが、久々にtableタグを使うことになって・・・すっかり忘れていました。。。 tableデザインの時代のコーディングで …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …

no image

レスポンシブサイト制作にチャレンジ。

この記事は約 1 分で読めます。最近、気になっているのが「レスポンシブWebサイト」。 1つのHTMLで、スマートフォンやタブレットなど小さな画面とパソコンなどの大きな画面で見た場合と見た目を切り替え …

no image

jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置

この記事は約 1 分で読めます。 大きな画像をフルスクリーンでスライドするjQueryライブラリ「Supersized」を試してみました。 画面のサイズが変わっても、画像の縦横比を維持したままキレイに …

no image

サイトマップを作ってみた♪

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 検索エンジンにページの存在を知らせ、クローラーの巡回を促すために作る「sitemap.xml」を作りたいと思います。 いくつもある …