loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [ウェブデザイン] > LightBox風なダイアログが出せるFaceboxを使ってみる
この記事は約4分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2009.12.20

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

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

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

 

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の中に直接記入しないと反映されないようです。
そのため膨大な設定項目がある場合はちょっとはんざつになるかもしれません。

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

以上です。

参考サイト

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「IZM(TCD034)」

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

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

先頭へ