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

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

no image

無料で簡単!アイコンフォント「Font Awesome」を使ってみた

この記事は約 1 分で読めます。 先日SNSアイコンをつけた時に、アイコンフォント「Font Awesome」を使用しました。 無料で、初めてでも簡単に使えるアイコンフォント「Font Awesome …

no image

ファビコンにチャレンジ。

この記事は約 1 分で読めます。前々から気になっていた「ファビコン」。 いろんなサイトのロゴとか何かのイラストとか・・、ブラウザのタブに小さなアイコンとして付いてるアレ・・。 せっかく自分のサイトを作 …

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …