今更ながらjQueryのプラグインThickBox3.1
- 2008年04月04日
- category:javascript
- Comment(1)
- Trackback(0)
jQueryのライブラリで有名なThickBoxっていうのがありますけど、実は一回も使ったことなかったんですよね。この前初めて使ったんですが、画像のポップアップだけじゃなくて、モーダルウィンドウ風に表示したり、iframeで画像以外のファイルを表示したりと、いろいろな使い方ができるんですね。今更ながらすげー便利だなと思いました。以下、覚書き程度に。
配布元
http://jquery.com/demo/thickbox/
必要ファイル
- jquery.js
- thickbox.js
- thickBox.css
- loadingAnimation.gif
- macFFBgHack.png
準備
- loadingAnimation.gifを適当なところに置いて、thickbox.jsの「tb_pathToImage」の値を配置したパスに書き換える
- macFFBgHack.pngを適当な位置に置いて、thickbox.cssの「.TB_overlayMacFFBGHack」で指定している背景画像のパスを配置したパスに書き換える
- jquery.js、thickbox.js、thickBox.cssを適当なところに置いて読み込む
個人的にはthickbox.cssのユニバーサルセレクタで設定しているmarginとpaddingのリセットは消したほうがいいかなと思います。
単一画像
LightBox風に画像が表示されます。画像にリンクしているa要素のclass名に「thickbox」を指定するだけです。また、a要素のtitle属性に指定した値が左下に表示されます。一番簡単使い方の例ですね。
複数画像
複数のa要素のrel属性に同じ値を設定することでグループ化でます。グループ化した場合、次/前の画像があると、左下にNext/Prevのリンクが表示されるようになります。classには全てのa要素に「thickbox」を指定します。
インラインテキスト
同一HTML内の内容をポップアップのような形式で開きます。a要素のhref属性に「#TB_inline?」を指定し、その後に&区切りでオプションを指定します。classには「thickbox」を指定します。また、a要素ではなく、ボタンにも適用できます。その場合はhref属性でなはく、alt属性に値を指定します。オプションの指定により、モーダルウィンドウ形式にできます。
オプション
- inlineId
- 表示するボックスのid
- width
- ポップアップの幅。デフォルトは630px
- height
- ポップアップの高さ。デフォルトは440px
- modal
- trueを指定するとモーダルウィンドウで開く。ポップアップ上部の「close」がなくなり、ポップアップの外をクリックしたり、Escキーを押しても消えない状態になる。その際は「tb_remove()」でポップアップを消すことができる
画像以外のファイル
別ファイルをポップアップ形式で開きます。a要素でリンク先にファイルのURIを指定し、その後に「?」につづけて&区切りでオプションを指定します。classには「thickbox」を指定します。iframe要素で開くかどうかをオプションで設定できます。試してないけど、これだとFlashとかもいけそうです。
オプション
- keepThis
- 調べたけどわからなかった。不要？知ってる方教えて下さい！
- TB_iframe
- trueを指定するとiframe要素でリンク先のファイルを開く。デフォルトではiframe要素を使わずに開く
- width
- ポップアップの幅。デフォルトは630px
- height
- ポップアップの高さ。デフォルトは440px
- modal
- trueを指定するとモーダルウィンドウで開く。ポップアップ上部の「close」がなくなり、ポップアップの外をクリックしたり、Escキーを押しても消えない状態になる。その際は「tb_remove()」でポップアップを消すことができる。iframeをtrueにした場合は、「self.parent.tb_remove();」とする
関連書籍
基礎 Ajax + JavaScript- Prev Entry
- 上下中央ハックの別の使い道
- Next Entry
- target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法
トラックバックURL
http://webtech-walker.com/archive/2008/04/04030001.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
コメント一覧
K8A 2008年4月4日 20時11分
コレ便利！と痛感した例。
ちょっと前に某サイトの自社開発CMSのページ内で「項目A」を編集する際に別ページの「項目B」を同時に編集しなきゃならない場面がよくあった。頻繁に使うんだけどページ移動が非常に面倒、開発者に変更を頼んでみたけどシステム自体の変更するのも面倒らしい。
悩んだ末、ThickBox入れて対応しました。無事解決。
まあ開発者が制作前に見越して設計するのがベストなんだけどね。。。