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

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

jquery.nivo.slider.jsを使ってリッチなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も数枚の画像を使ったスライドショーを作りたいと思います。 見た目がキレイで、ユーザーが自由に前後の画像へ移動する事も出来て、ちょっとしたテキストも入れられるという・ …