faceboxのキーバインドを改造

WordPressでJQuery版LightBoxプラグインを探していたのだが見つからない。探していた仕様は以下

リンク先の画像を格好良くポップアップ表示(LightBoxっぽく)
ポップアップを戸惑うことなく簡単に閉じれること(マウスクリック、Enter、ESCなどで)
rel=”ほげほげ”としなくても良い
商用フリー

JQueryの画像をポップアップしてくれるもので条件を満たすものがなかなか見つからん。。。というわけで一番仕様に近いFaceboxを改造することに。。。

まずEnterでポップアップを閉じるように改造

変更前

      $(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27) $.facebox.close();
		return true;
      });

変更後

      $(document).bind('keydown.facebox', function(e) {
        if (e.keyCode == 27 || e.keyCode == 13 ) $.facebox.close();
		return true;
      });

次にマウスボタンクリックでポップアップを閉じるように改造。loading: function()の中に記述します。(前のコードの次あたりが分かりやすい)

      $(document).bind('click.facebox', function(e) {
        $.facebox.close();
		return true;
      });

次にrel属性が既に挿入されている場合、ポップアップしてくれるように改造。

ブログ記事では画像挿入すると自動的にrelの中に属性が設定されています。そのため正規表現でのマッチがうまくいかずrel=”facebox”が与えられません。

wp-facebox.phpのrel_replace関数を以下に置き換えます。

	function rel_replace( $content ) {
		$pattern[0] = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
		$replacement[0] = '<a$1href=$2$3.$4$5 rel="facebox"$6>';

		$pattern[1] = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)rel=('|\")(.*?)('|\")(.*?)>/i";
		$replacement[1] = '<a$1href=$2$3.$4$5 rel="facebox">';

		$pattern[2] = "/<a(.*?)rel=('|\")(.*?)('|\")(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
		$replacement[2] = '<a$1href=$6$7.$8$9 rel="facebox">';

		$content = preg_replace($pattern, $replacement, $content);

		return $content;
	}