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テーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

WordPressプラグイン「Jetpack」のギャラリーがスマホで表示が崩れたとき

この記事は約 1 分で読めます。WordPressのプラグイン「Jetpack」はとても多機能で、ホントにいろんなコトができて便利。 しかし、たくさんの画像をギャラリー表示をした場合、スマホのように画 …

no image

WordPress ナゾのスマイルマーク

この記事は約 1 分で読めます。 あんまり気にしてなかったんだけれど、フッターの下にとても小さなナゾのスマイルマークがありました。 今回、オリジナルテーマを作成していて・・・何となくフッターの下にのぞ …

no image

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

Yahoo!アクセス解析を使ってみた感想【レポート】

この記事は約 1 分で読めます。 以前、「Yahoo!アクセス解析を設定してみました!」でYahoo!アクセス解析を設定し、Google Analyticsと一緒にこのブログのアクセス解析を開始しまし …