jQueryで自動的にrel="lightbox"を挿入する

MovableTypeを使用していて、Lightboxのプラグインを探していたのですがないないと思って、よくよく考えたらjQueryの
.attrで挿入してやればプラグイン的に挿入できると思ったので下記の記述で作成しました。この書き方を行えばいろいろな使いかたができると思うので覚書light-boxに使えるようになっていますのでまずlightboxをダウンロードして試してみてはいかがでしょうか？
Lightboxをダウンロード

HTMLの記述

div id="txt_Area"中にあるaタグにrel lightboxを記載していきます。
下記、HTMLの記述になります。

<div id="txt_Area">
    <a href="001.shtml"><img src="btn.jpg"></a>
    <a href="002.shtml"><img src="btn.jpg"></a>
    <a href="003.shtml"><img src="btn.jpg"></a>
    <a href="004.shtml"><img src="btn.jpg"></a>
</div>

javascriptの記述

Javascriptで自動的にrel=”lightbox”を挿入して行きます。
txt_Areaは独自のIDになります。

<script type="text/javascript">
// ページ内のすべてのaタグに繰り返し処理
$("a").each(function() {
    //aタグ内にimgタグがあるか？
    if( $(this).find('img').length ) {
        $(this).attr( "rel", "lightbox" ); // 画像リンクの場合だけ属性を追加する
    }
});

$(function(){ //記事内（txt_Area内）の各画像ファイルに追加する
  $('#txt_Area a[href$=".jpg"],#txt_Area a[href$=".jpeg"],#txt_Area a[href$=".JPG"],#txt_Area a[href$=".JPEG"],#txt_Area a[href$=".png"],#txt_Area a[href$=".PNG"],#txt_Area a[href$=".gif"],#txt_Area a[href$=".GIF"]').attr({ rel: "lightbox" });
});
</script>

実行結果

<div id="txt_Area">
    <a href="001.shtml"><img src="btn.jpg" rel="lightbox"></a>
    <a href="002.shtml"><img src="btn.jpg" rel="lightbox"></a>
    <a href="003.shtml"><img src="btn.jpg" rel="lightbox"></a>
    <a href="004.shtml"><img src="btn.jpg" rel="lightbox"></a>
</div>

この記述はrel以外、aタグ以外にも使用が可能なので覚えておくといろいろな用途に使うことができるので覚えておこうと思います。
ちなみにpng、jpg、gifへの対応になります。