WordPress で Facebox を使う

2009-07-26 06:23

wp_x_facebox-L

今日は、ブログの調整を色々行っていました。
今回は画像のポップアップをjavascriptで実装する方法に関してです。

今までは prototype.jsベースの lightview.js を使っていたのですが、そろそろ prototype.js を脱しようと思い、jQuery.js ベースの Facebox を使うことにしました。

Facebox の導入はとても簡単でした。
大半のこういったスクリプトはWordPressプログラムとして、提供されているので試してみましたがダメでした。

何がダメかというと、オプション設定が無い為です。
Faceboxはどのリンクをポップアップにするかを簡単に記述出来る様になっているので、オプションが無い＝プラグインソースを修正する必要がある = プラグインの意味がない！という結論に至りました。

なので、手動でファイルをダウンロード。

まずは js と css 内の画像へのリンクを修正する必要があるので、修正しファイルをFTPでアップロード。
あとはヘッダー~~又は、フッター~~に下記のソースを書き加える。

訂正：<head>タグ内でしか<link>タグ使えないのにフッターとか書いてました…。訂正致します。

<script type="text/javascript" src="/js/facebox/facebox.js"></script>
<link type="text/css" rel="stylesheet" href="/js/facebox/facebox.css" />
<script type="text/javascript">
jQuery(document).ready(function($) {
	$('div.post-inner a[href$=".jpg"], div.post-inner a[href$=".gif"], div.post-inner a[href$=".png"], a[rel*=facebox]').facebox();
}) </script>

基本的には以上で終わりです。

5行目の部分が自動でポップアップにするリンクを定義してる部分になります。
ここは、「,」区切りで記述してあり、例えば