MT4でJS(jQuery)のみでThickBoxに対応する

MovableType4.2でThickBoxに対応させた時にメモ。
検索すると、MTのエントリーで画像を挿入した場合に自動で対応タグを出力するために、
MT自体のソースファイルをカスタマイズする方法が大半だったんですが、
これだとアップデートとかするのが怖くなるので、なんとかMTのソースは触らずに実現できないかと模索。

いろいろ模索した後に、yuga.jsでも対応出来る事が判明したけど、くじけずに書いてみますorz

考え方)

1. jQueryで画像へのリンクを探す
   • リンク先は同じドメイン(blog)の画像ファイルである事
2. リンクに[ class=”thickbox” ]を設定

jQuery,thickbox関連を読み込ませた後に、以下のjavascriptを定義すればOK。
[javascript]
var ThickClass = “thickbox”; //thickboxのclass名

// jQuery拡張：
// :external 要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と異なる場合に (今回は不要)
// :internal 要素が href 属性を持ち、かつその属性値 (リンク先) のホスト名 (ドメイン名) が今いるページのホスト名と同じ場合に

$.extend($.expr[‘:’],{
external: function(a,i,m) {
if(!a.href) {
return false;
}
return a.hostname && a.hostname !== window.location.hostname;
},
internal: function(a,i,m) {
if(!a.href) {
return false;
}
return a.hostname && a.hostname == window.location.hostname;
}
});

function SetThickBox () {
$(‘a[href$=.png]:internal, a[href$=.jpg]:internal, a[href$=.gif]:internal’).each(function(){
$(this).addClass(ThickClass); //class追加
});
}

$(document).ready( function() {
SetThickBox();
});
[/javascript]

jQueryのセレクタって簡単に拡張できるんですね。便利便利。
いつもセレクタ文が複雑な分岐になるとスマートじゃなくなるので、この方法は今後も活用していきたい。

ぼやき)
jQuery使うならThickBoxがいいですね。
Lightboxもいいんだけどprototype.jsがベースなので、
二つのjsフレームワークを読み込むのはちょっと抵抗があります。

参考サイト）

• jQuery で外部サイトへのリンクをコントロール – terkel.jp
• jQuery のセレクタ機能を拡張する – terkel.jp