読者です 読者をやめる 読者になる 読者になる

Facebox私家版

Facebox は Facebook ふうのダイアログを表示する jQuery プラグインです。この手のライブラリとしては Lightbox が有名です。

この Facebox の表示を CSS 3 を使うことによって少しだけ軽くしてみました。本家からファイルを取得して、facebox.css, facebox.js を後述の内容に置き換えることで動作します。
jQuery のバージョンは 1.2 と書かれていますが、現時点での最新版 1.4.2 でも動作することを確認しています。

また、必要な画像は次の二つのみです。

  • closelabel.png
  • loading.gif

ソースはこちら。あとで本家から fork する。

使い方(本家より)

画像を表示する

<a href="images/stairs.jpg" rel="facebox">Show</a>

ドキュメント内の要素を表示する

<a href="#info" rel="facebox">Show</a>

<div id="#info">
    <h3>すごいポップアップ</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

外部リソースを表示する

<a href="remote.html" rel="facebox">Show</a>

最初に必要な設定は

  • jQuery を読み込む
  • facebox.css, facebox.js を読み込む
  • ロード時に次の設定をする
$(function($) {
    $('a[rel*=facebox]').facebox();
});