LightBox風なダイアログが出せるFaceboxを使ってみる
も・く・じ
ちょっとしたコメントフォローなどを別ウインドウで出すのは簡単ですけどちょっと味気ない気もします。
かといってLightBoxを使うほどのものでもないなと思っていたところFaceboxなるものを見つけました。
よさげなのでさっそく試してみましたよ。
設定イメージ
Faceboxでリンク表示できるのはテキストや画像、HTMLページなど様々ですが、今回はHTMLテキストと画像を表示させてみることにします。
HTML テキストの表示デモ（クリックで表示：外周が半透明になっている筈...）
画像の表示デモ（クリックで表示）
手順
まずはFacebox をダウンロードします。
ダウンロードしたFaceboxを解凍し、JSファイル・CSS ファイル・使用画像ファイルがそっくり同梱されている「Facebox」フォルダをそのまま適当なフォルダにぶち込みます。
あとjQueryが必要です。
最初にjsの読み込みとCSSの読み込み。
|
0 1 2 3 4 |
<link rel="stylesheet" type="text/css" href="（facebox.css へのパス）" /> <script type="text/javascript" src="（jquery へのパス）"></script> <script type="text/javascript" src="（facebox.js へのパス）"></script> |
直下に以下のスクリプトも記述します。
|
0 1 2 3 4 5 6 |
<script type="text/javascript"> $(document).ready(function($) { $('a[rel*=facebox]').facebox(); }); </script> |
ワードプレスで使用する場合、”$”は”jQuery”に書き換えた方がいいので「$(document)...」は「jQuery(document)...」にします。
他は”$”のままでも問題ないでしょう。
次にfacebox.cssとfacebox.js内の使用画像へのパスが各利用者の環境で異なるため、デフォルト記述から変更する必要があります。
facebox.cssの#facebox .b、#facebox .tl、#facebox .tr、#facebox .bl、#facebox .brこれらすべての画像パスを自分の環境に合わせて変更します。
今回は「facebox」フォルダ内に画像・CSSファイル・jsファイルすべてを入れてあるので下記のように変更しました。
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
#facebox .b { background:url(b.png); } #facebox .tl { background:url(tl.png); } #facebox .tr { background:url(tr.png); } #facebox .bl { background:url(bl.png); } #facebox .br { background:url(br.png); } |
facebox.jsも上記同様に、82・83行目の「ローディングイメージ」と「閉じる」ボタンのパス及び100行目のパスも変更します。
|
0 1 2 3 4 |
loadingImage : 'loading.gif', closeImage : 'closelabel.gif', img src="closelabel.gif" |
上記画像は自作のものに変えてもいいでしょう。
ここまでやれば問題なくいく筈なんですが、なぜか「閉じる」ボタンが「？」マークで正常に表示されません。
それでもクリックすると画面が消えるので機能としては正常に動いていると思われます。
とすれば画像パスがおかしいとしか思えません。
いろいろトライした結果、原因はやはりパスの書き方にありました。
”closelabel.gif”が「Facebox」フォルダ内に置いてあったので”closeImage: 'closelabel.gif'”という書き方で問題ないと思っていたんですが、実はFaceboxを呼び出しているHTMLファイルから見た相対パスを書かなければならなかったんです。
そこでfacebox.js 82行目を下記のように再度変更します。
（私の場合、各ファイルは「facebox1.2」というフォルダ内に置いてありました）
|
0 1 2 |
loadingImage : 'facebox1.2/loading.gif（ここは環境に合わせ適宜変更のこと）', |
83行目のクローズイメージパス、および100行目も同じ要領で書き換えます。
「閉じる」ボタンの位置はデフォルトで右寄せですがfacebox.cssの#facebox .footerをtext-align: center;に変更することで中央寄せも可能です。
ワードプレスでうまく表示されない場合は絶対パスで指定してやるとうまくいくでしょう。
HTML内には faceboxを使用したいリンクにrel="facebox"を付加します。
|
0 1 2 |
<p><a href="（Faceboxで表示させたい画像やHTMLページへのパス）" rel="facebox">（リンク用テキストなど）</a></p> |
a要素にrel="facebox"と記述すると display: none;にして非表示にしてある内部リンクも表示可能らしいですが、こちらは未検証です。
IE6ではPNG画像が透過せず、外周半透明ボックス角丸のわずかな部分がグレー表示されてしまいます。これが気になるようであればIE6用の透過指定を新たに加える必要があります。
最後にtable関連の設定がないと表示がおかしくなる場合があるらしいということで下記を加筆します。
|
0 1 2 3 4 5 |
#facebox * { border-style: none; background-color: transparent; } |
デモの HTMLテキストの CSS設定は facebox.cssの中に直接記入しないと反映されないようです。
そのため膨大な設定項目がある場合はちょっとはんざつになるかもしれません。
欲を言えばモーダルボックスではなくマウスでドラッグできるといいんですが、それが変更可能かどうかはわかってません。
以上です。
参考サイト
スポンサーリンク
記事はお役にたてましたか?
記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓