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記事中の文章をコピーしたら管理者にお知らせしてくれるプラグイン「Check Copy Contents(CCC)」を試してみた

この記事は約 2 分で読めます。 私の過去記事で人気なのが、「画像のコピーガード」。画像を盗用されることに対して対策を打ちたい方がたくさんいらっしゃるのでしょう。 もしこれが記事中の文章においても、コ …

no image

WordPress 子テーマを作ってみた。

この記事は約 1 分で読めます。 WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。 1つ目は直接テーマをいじる方法。2つ目は、「子テーマ」を作 …

no image

WordPress Moreタグを使った抜粋にチャレンジ

この記事は約 1 分で読めます。 今回は、「抜粋」にチャレンジします♪ 「抜粋」は、記事の一部のみ表示して「続きを読む」という文字をクリックすると、全文が表示されるものです。 長い文章の場合にはかなり …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …