Facebox 1.2を導入してみました。

これまで、画像のポップアップ表示には yuga.js で使われていた「ThickBox 3.1」を使用していました。ThickBox 3.1 は非常に軽い動作で良いのですが、ブラウザの表示領域より大きい画像を表示させると、自動的に縮小されてしまいます。この自動縮小は基本的には便利なんだけど、画像に書かれている文字も読ませたいときなどはちょっと不便になってしまう諸刃の剣でした。

この自動縮小機能を無効化する方法もあるようですが（fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする）、それだとブラウザをスクロールしても、オーバーレイされた画像はスクロールできず、結局表示領域からはみ出した部分は見られないという、こちらも諸刃の剣でした。

そこで、今回、動作の軽さという点や、使用できるリンクの種類が ThickBox とあまり変わらなそうな「Facebox」に変更しました。

さて、使い方を簡単に説明しておきましょう。

ちなみに、今回僕は yuga.js のファイルに直接書き込む形で使用していますが、両方の手順を書いておきます。

Facebox 1.2 をダウンロード

まず初めに、Facebox 1.2 の「Download Facebox v1.2」からダウンロードして解凍しましょう。

解凍したフォルダの構成は非常にシンプルで、１つのフォルダに全部入っています。

jQuery をダウンロード

今ダウンロードした「Download Facebox v1.2」の少し上に「Requires jQuery 1.2.1.」とあるので、そこから jQuery をダウンロードしましょう。バージョンは、1.2.1 でなく最新版の 1.2.3 でも大丈夫だと思います。

ダウンロードした jQuery を、jquery.js という名前にして、faceboxフォルダに入れておきます。

facebox.js と facebox.css を変更

基本的には、解凍したfaceboxフォルダをそのままブログやWebサイトのトップページのあるディレクトリにアップロードすれば良いはず。

しかし、「ブログやWebサイトのトップページのあるディレクトリ」といいましたが、例えば僕のブログのように、「/blog/」といった URL で公開している場合は、「/blog/」の下ではなく、「/」の直下におく必要があります。

ただ、僕の場合は、Movable Type がインストールされているディレクトリとは別のディレクトに、JavaScriptライブラリなどをまとめた「library」ディレクトリを作って、ライブラリ関係は全部そこに入れているので、画像を読み込むパスをデフォルトの絶対パス（'/facebox/～'）から変更しなければなりません。

ここで、単純に絶対パスを「'/library/facebox/～'）のように変えれば良いのですが、後々変更箇所が一目でわかりやすくなるという意味もあり、絶対URI（'http://～/facebox/～'）に変更してしまいます。

よって、初めにその部分を変更しておきます。もちろん、変更しないでうまくいくなら、そのままでOKですが、この手順に沿って変更しても問題はありませんし、確実でしょう。

まず、facebox.js をテキストエディタで開き、49、50、67行目を次のように変更します。なお、絶対URIの部分は、自身の facebox をインストールするディレクトリに合わせて変更してください。

[facebox.js　49、50行目]

（変更前）
loading_image : '/facebox/loading.gif',
close_image : '/facebox/closelabel.gif',

（変更後）
loading_image : '/library/facebox/loading.gif',
close_image : '/library/facebox/closelabel.gif',

[facebox.js　67行目]

（変更前）
<img src="/facebox/closelabel.gif" title="close" class="close_image" /> \

（変更後）
<img src="/library/facebox/closelabel.gif" title="close" class="close_image" /> \

続いて、facebox.css の1～19行目も同様に変更します。

[facebox.css　1～19行目]
（変更前）
#facebox .b {
 background:url(/facebox/b.png);
}

#facebox .tl {
 background:url(/facebox/tl.png);
}

#facebox .tr {
 background:url(/facebox/tr.png);
}

#facebox .bl {
 background:url(/facebox/bl.png);
}

#facebox .br {
 background:url(/facebox/br.png);
}

（変更後）
#facebox .b {
 background:url(/library/facebox/b.png);
}

#facebox .tl {
 background:url(/library/facebox/tl.png);
}

#facebox .tr {
 background:url(/library/facebox/tr.png);
}

#facebox .bl {
 background:url(/library/facebox/bl.png);
}

#facebox .br {
 background:url(/library/facebox/br.png);
}

さらに、facebox.css には、table 関係のスタイルがほとんど設定されていないので、使用しているブログのテンプレートでそれらが設定されていると、facebox を起動したときの表示がおかしくなってしまいます。

したがって、facebox.css に次のような設定を追加して、table 関係のスタイルを上書きしておきましょう。

/* add */
#facebox * {
　　　　border-style: none;
　　　　background-color: transparent;
}

Facebox 1.2 を実行するスクリプトを追加

続いて、Facebox 1.2 を呼び出すスクリプトを書きましょう。

以下のようなスクリプトをテキストエディタで書き、適当な名前（ここでは「faceboxOnload.js」とします）をつけて保存しましょう。

[ファイル名： faceboxOnload.js]

jQuery(document).ready(function($) {
 $('a[rel*=facebox]').facebox();
})

作者サイトで紹介されているスクリプトでは、$のうしろのカッコ内は「$('a[rel*=facebox]')」だけで、このままでも画像などをリンクした a 要素に rel="facebox" を追加するだけで使えますが、実際のところ、こういうライブラリを使う人の9割以上は、画像への直リンクはすべてそのライブラリを使いたいのだと思います。

ですので、以下のように記述しておけば、jpg、gif、png ファイルへ直リンクするだけで、自動的に Facebox 1.2 が使えるようになります。

[ファイル名： faceboxOnload.js]

jQuery(document).ready(function($) {
 $('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"], a[rel*=facebox]').facebox();
})

Facebox 1.2 をアップロードと読み込み

さて、上で作った「faceboxOnload.js」を faceboxフォルダに入れて、全部まとめてサーバーにアップロードします。

アップロードに成功したら、Facebox 1.2 を使いたいサイトのヘッダーに以下のように記述し、ファイルを読み込みます。このとき、js ファイルの順番がこの通りになるように注意が必要です。

<link rel="stylesheet" href="/library/facebox/facebox.css" type="text/css" media="all" />
<script type="text/javascript" src="/library/facebox/jquery.js"></script>
<script type="text/javascript" src="/library/facebox/facebox.js"></script>
<script type="text/javascript" src="/library/facebox/faceboxOnload.js"></script>

ここまでで準備OKです。

Facebox 1.2 を使う

ここまでの作業がうまくいけば、画像に関しては直リンクするだけで Facebox 1.2 を使えると思います。

画像リンクのサンプル

<a href="/blog/images/safari3.1-thumb-250x234.jpg">safari3.1の画像</a>

a 要素に「rel="facebox"」と記述すれば、「display: none;」で非表示にしてある内部リンクでもOKです。

ページ内リンクのサンプル

<a href="#displayNone" rel="facebox">displayNone</a>
<p id="displayNone" style="display: none;">見つかっちゃった！</p>

他にも色々できます。Facebox 1.2を見れば、サンプルとサンプルソースが掲載されているので、割と簡単にできると思います。

なお、このブログでは yuga.js を使っているので、画像にしか使っていませんが。

yuga.js で使う方法

僕が今回 Facebox 1.2 を導入したのは、yuga.js で使用している Thickbox 3.1 の代わりという位置付けだったので、Facebox 1.2 を呼び出すスクリプトも yuga.js に記述しました。

方法は簡単で、まずyuga.js のthickbox に関する記述をコメントアウトします。

//	$.yuga.thickbox();

/*
	//画像へ直リンクするとthickboxで表示(thickbox.js利用)
	thickbox: function() {
		try {
			tb_init('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"]');
		} catch(e) {
		}	
	},
*/

続いて、yuga.js の一番下に、先ほど faceboxOnload.js というファイル名で保存したスクリプトを追加します。

//[start] 画像へ直リンクするとfaceboxで表示(facebox.js利用)
jQuery(document).ready(function($) {
 $('a[@href$=".jpg"], a[@href$=".gif"], a[@href$=".png"], a[rel*=facebox]').facebox();
})
//[end] 画像へ直リンクするとfaceboxで表示(facebox.js利用)

そして、あとはファイルを読み込めばOKです。読み込むファイルのパスは、自身の環境によって変わるので注意深く記述しましょう。僕は結構ここでうっかりミスをしてしまうので。

<!-- yuga.js 0.5.3 (ThickBox 3 を Facebox 1.2 に変更)-->
<link rel="stylesheet" href="/library/facebox/facebox.css" type="text/css" media="all" />
<script type="text/javascript" src="/library/yuga/js/jquery.js"></script>
<script type="text/javascript" src="/library/facebox/facebox.js"></script>
<script type="text/javascript" src="/library/yuga/js/yuga.js"></script>
<!-- /yuga.js 0.5.3 -->

ちなみに、デフォルトでは Facebox 1.2 では、jQuery 1.2.1 を使用し、yuga.js では jQuery 1.2.3 を使用する前提ですが、Facebox 1.2 の方は jQuery 1.2.3 でも問題なく動作するようです。

[関連リンク]

• Facebox 1.2
• ThickBox 3.1