製品-
- _tt
- 562ポイント
- 投稿時間:2008/09/03 21:01
jQueryなLightboxライブラリのThickBoxをAjaxなコンテンツで使う方法です。
本文
jQueryなLightboxライブラリのThickBoxをAjaxなコンテンツで使う方法です。 Lightbox風の表示をするライブラリは、 The Lightbox Clones Matrix http://planetozh.com/projects/lightbox-clones/ にあるとおり非常にたくさんありますが、今回jQueryを使っていたページということと、Lightbox内にiframeを表示したかったので、ThickBox 3.1を選びました。 通常、ThickBoxでiframeなページを表示する場合は、 HTMLコードの例のようにiframeに表示したいページのURLに、コピペする ブログに貼る<a href="iframeのURL?KeepThis=true&TB_iframe=true&height=400&width=600" class="thickbox">click!</a>?KeepThis=true&TB_iframe=true&height=400&width=600をつけ、class="thickbox"と書けばよいのですが、リンククリック時にLightboxとして振る舞う為のイベントハンドラの登録は、ThickBoxのJavaScriptライブラリを読み込んで、ドキュメントがロード完了したタイミングで行われます。 つまり、Ajaxで後からDOMで生成したリンク要素にいくら class="thickbox" をつけても、Lightboxとして働いてくれません。 ちょっと困ったなあと思って、ThickBoxのソースを見てみたところ、シンプルにできそうだったので、実際やってみたらできました。先頭部分を抜粋すると、 thickbox.js
となっており、要は tb_init() 相当のことをリンク要素を生成したタイミングで行ってやれば良さそうです。 そこで、 JavaScriptコードの例コピペする ブログに貼る//on page load call tb_init $(document).ready(function(){ tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; }); //add thickbox to href & area elements that have a class of .thickbox function tb_init(domChunk){ $(domChunk).click(function(){ var t = this.title || this.name || null; var a = this.href || this.alt; var g = this.rel || false; tb_show(t,a,g); this.blur(); return false; }); }という関数をつくっておいて、 HTMLコードの例コピペする ブログに貼るfunction thickbox(link) { var t = link.title || link.name || null; var a = link.href || link.alt; var g = link.rel || false; tb_show(t,a,g); link.blur(); return false; }のように普通に onclick 属性で関数を呼び出すようにしてやればOKでした。コピペする ブログに貼る<a href="iframeのURL?KeepThis=true&TB_iframe=true&height=400&width=600" onclick="return thickbox(this);">click!</a>で、その例。 → Google ストリートビューをLightBoxに表示
- コメント数 (3)
- クリップ数 (0)
- アクセス数 (6105)
-
プログラミング / 開発言語 / JavaScript
総合トップへ- コメント
-
- zyxwvutihgfedcba
- 47ポイント
- 2008/11/26 14:49
zyxwvutihgfedcbaと申します。 ThickBox初期化の方法、大変参考になりました。ありがとうございました。m(_ _)m 処で、私事ではありますが、下記URLに関連の質問を上げさせて頂いております。 お時間が許すようであれば、ご指導頂ければ幸いです。 http://okyuu.com/en/question/4067 以上
-
- zyxwvutihgfedcba
- 47ポイント
- 2008/11/26 16:57
zyxwvutihgfedcbaと申します。 私の課題は、ThickBoxの問題ではありませんでした。 お騒がせしました。 m(_ _)m
0
コメント
0
コメント
(2009/03/05 14:18)
by zazen_boys
1
コメント
(2008/06/03 11:40)
by hothot
0
コメント
(2008/06/03 15:23)
by boyboy
- 0クリップ
- 1312アクセス
- プログラミング / 開発言語 / JavaScript
0
コメント
(2009/06/16 17:52)
by cyokodog
- 0クリップ
- 1491アクセス
- プログラミング / 開発言語 / JavaScript
0
コメント
2
コメント
6
コメント
0
コメント
(2009/01/20 14:34)
by jurnal
- 0クリップ
- 1241アクセス
- プログラミング / 開発言語 / JavaScript
2
コメント
ページトップへ
ノウハウトップへ戻る
総合 JavaScript カテゴリへ
