HOME > ウェブデザイン > LightBox風なダイアログが出せるFaceboxを使ってみる
公開日:2009.12.20
この記事は約4分で読めます。

LightBox風なダイアログが出せるFaceboxを使ってみる

この記事は最終更新日から9年以上経過しているため現状にそぐわない可能性もあります。

ちょっとしたコメントフォローなどを別ウインドウで出すのは簡単ですけどちょっと味気ない気もします。

かといってLightBoxを使うほどのものでもないなと思っていたところFaceboxなるものを見つけました。

よさげなのでさっそく試してみましたよ。

SIRIUSレビューイメージ画像

設定イメージ

Faceboxでリンク表示できるのはテキストや画像、HTMLページなど様々ですが、今回はHTMLテキストと画像を表示させてみることにします。

demo

HTML テキストの表示デモ(クリックで表示:外周が半透明になっている筈...)

画像の表示デモ(クリックで表示)

手順

まずはFacebox をダウンロードします。

ダウンロードしたFaceboxを解凍し、JSファイル・CSS ファイル・使用画像ファイルがそっくり同梱されている「Facebox」フォルダをそのまま適当なフォルダにぶち込みます。

あとjQueryが必要です。

 

最初にjsの読み込みとCSSの読み込み。

直下に以下のスクリプトも記述します。

ワードプレスで使用する場合、”$”は”jQuery”に書き換えた方がいいので「$(document)...」は「jQuery(document)...」にします。

他は”$”のままでも問題ないでしょう。

次にfacebox.cssとfacebox.js内の使用画像へのパスが各利用者の環境で異なるため、デフォルト記述から変更する必要があります。

facebox.css#facebox .b、#facebox .tl、#facebox .tr、#facebox .bl、#facebox .brこれらすべての画像パスを自分の環境に合わせて変更します。

今回は「facebox」フォルダ内に画像・CSSファイル・jsファイルすべてを入れてあるので下記のように変更しました。

facebox.jsも上記同様に、82・83行目の「ローディングイメージ」と「閉じる」ボタンのパス及び100行目のパスも変更します。

上記画像は自作のものに変えてもいいでしょう。

ここまでやれば問題なくいく筈なんですが、なぜか「閉じる」ボタンが「?」マークで正常に表示されません。

それでもクリックすると画面が消えるので機能としては正常に動いていると思われます。

とすれば画像パスがおかしいとしか思えません。

いろいろトライした結果、原因はやはりパスの書き方にありました。

”closelabel.gif”が「Facebox」フォルダ内に置いてあったので”closeImage: 'closelabel.gif'”という書き方で問題ないと思っていたんですが、実はFaceboxを呼び出しているHTMLファイルから見た相対パスを書かなければならなかったんです。

そこでfacebox.js 82行目を下記のように再度変更します。

(私の場合、各ファイルは「facebox1.2」というフォルダ内に置いてありました)

83行目のクローズイメージパス、および100行目も同じ要領で書き換えます。

「閉じる」ボタンの位置はデフォルトで右寄せですがfacebox.cssの#facebox .footerをtext-align: center;に変更することで中央寄せも可能です。

ワードプレスでうまく表示されない場合は絶対パスで指定してやるとうまくいくでしょう。

HTML内には faceboxを使用したいリンクにrel="facebox"を付加します。

a要素にrel="facebox"と記述すると display: none;にして非表示にしてある内部リンクも表示可能らしいですが、こちらは未検証です。

IE6ではPNG画像が透過せず、外周半透明ボックス角丸のわずかな部分がグレー表示されてしまいます。これが気になるようであればIE6用の透過指定を新たに加える必要があります。

最後にtable関連の設定がないと表示がおかしくなる場合があるらしいということで下記を加筆します。

デモの HTMLテキストの CSS設定は facebox.cssの中に直接記入しないと反映されないようです。

そのため膨大な設定項目がある場合はちょっとはんざつになるかもしれません。

欲を言えばモーダルボックスではなくマウスでドラッグできるといいんですが、それが変更可能かどうかはわかってません。

以上です。

参考サイト

スポンサーリンク

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)