前回記事 までで、画像のポップアップ・ライブラリの導入設定作業は終わりました。しかし一つ、設定していないことがありました。それはスクロールすることによりページを次々に表示する、AutoPager や AutoPagerize そして AutoPatchWork に対する設定です。このため今回は簡単に、これらの設定をしてみます。
設定の仕組み
設定方法については以前、SyntaxHighlighterの設定の中で紹介している。
参考： ブログ上でプログラムソースを表示する方法⑤ AutoPager / AutoPagerize に対応させる
同じようにポップアップ・ライブラリも設定すればよい。
ページ継ぎ足し時のイベントに合わせて、必要なスクリプトを動かす必要がある。ページ継ぎ足し時に各ツールが発生させるイベントは次のようになる。
| ツール | イベント |
|---|---|
| AutoPager | AutoPagerAfterInsert |
| AutoPagerize | AutoPagerize_DOMNodeInserted |
| AutoPatchWork | AutoPatchWork.DOMNodeInserted |
設定方法
それでは設定方法について考えて行こう。
SyntaxHighlighter の設定ではイベント処理用に addEventListener を利用した。しかしポップアップ・ライブラリの設定では jQuery を導入したため、今回は jQuery の機能を使ってみる。
jQuery のイベント処理では bind を利用する。以前設定した FancyBox の設定 と合わせて bind を設定すると次のようになる。
<link href='http://xxxxx/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js' type='text/javascript'/>
<script src='http://xxxxx/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
$(document).bind('ready AutoPagerize_DOMNodeInserted AutoPagerAfterInsert AutoPatchWork.DOMNodeInserted', function(){
$("a[href*='picasaweb.google.com']:has(img)").each(function(){
$(this).fancybox({'href': this.firstChild.src.replace(/\/s\d+(?:\-c)?\/([^\/]+)$/, '/$1')});
});
$("a[href*='bp.blogspot.com']:has(img)").fancybox();
$("a[href*='up.seesaa.net']:has(img)").fancybox();
});
});
</script>
追加したコードは ６と１２行目だ。bind で ready / AutoPagerAfterInsert / AutoPagerize_DOMNodeInserted / AutoPatchWork.DOMNodeInserted の各イベントに処理を設定している。複数のイベントを同時に設定する記法は、jQuery 1.4 以上でサポートしている。
しかし上記の設定には問題がある。AutoPatchWork のイベント名を見て欲しい。
AutoPatchWork.DOMNodeInsertedイベント名の中にドット文字が含まれる。bind に設定するイベントにドットがあると、jQuery はドット以降を 名前空間（namespace） として認識する仕様となっている。
名前空間として認識されないような回避方法を探ってみたが、今のところ有効な設定方法を探せなかった。このため「まとめ」のように、AutoPatchWorkだけ addEventListener を使用した記述方法を採用している。
まとめ
FancyBox の設定（例）
<link href='http://xxxxx/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js' type='text/javascript'/>
<script src='http://xxxxx/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(function($){
function handler(){
$("a[href*='picasaweb.google.com']:has(img)").each(function(){
$(this).fancybox({'href': this.firstChild.src.replace(/\/s\d+(?:\-c)?\/([^\/]+)$/, '/$1')});
});
$("a[href*='bp.blogspot.com']:has(img)").fancybox();
$("a[href*='up.seesaa.net']:has(img)").fancybox();
}
$(document).bind('ready AutoPagerize_DOMNodeInserted AutoPagerAfterInsert', handler);
if (window.addEventListener) {
window.addEventListener('AutoPatchWork.DOMNodeInserted', handler, false);
}
});
</script>
参考
jQuery日本語リファレンス - bind(type, [data], fn)
jQuery日本語リファレンス - Namespaced Events