小粋空間  -  a cheap joke and a play on words site

Litebox 1.0 の rel 属性を自動付与する

以前、クールに画像を表示するツール Litebox 1.0 をご紹介しました。この Litebox を起動するためには、a 要素の rel 属性に "lightbox" を付与しなければならないという条件があり、これを手動で付与するのは結構面倒です。

ということで「自動付与できないでしょうか」というご質問を頂きました。大変遅くなりましたが、rel 属性を自動付与する方法を本エントリーにてご紹介致します。

rel 属性を自動付与するには、Litebox 1.0 のパッケージ内にある、js/litebox-1.0.js を任意のエディタで開き、130 行目辺り（リスト 1）に青色のコードを追加します。

　　　　　：
// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
    if (anchor.getAttribute('href') && anchor.getAttribute('href').match(/jpg$|gif$|png$/) && !anchor.getAttribute('rel')) {
        anchor.setAttribute('rel', 'lightbox');
    }
    var relAttribute = String(anchor.getAttribute('rel'));
    
    // use the string.match() method to catch 'lightbox' references in the rel attribute
    if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
        anchor.onclick = function () {myLightbox.start(this); return false;}
    }
}
　　　　　：

リスト1　litebox-10.js 変更箇所

この変更は、ページ内にある a 属性に rel="lightbox" を付与します。ただし、rel 属性が予め設定されている場合は処理を行ないません。したがって画像をグループ表示する場合は手動で rel 属性を付与すれば、お互いの処理が干渉しません。

ただしページ全体の a 要素をチェックするため、サイドバー等の予期しない箇所に Litebox が設定される可能性があります。記事本文内だけにとどめたい場合は、122行目辺りの処理（リスト2）

　　　　　：
initialize: function() {
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementsByTagName('a');
　　　　　：

リスト2　litebox-10.js 変更箇所2（変更前）

を、リスト3のように青色部分を追加すると良いでしょう。

　　　　　：
initialize: function() {
    if (!document.getElementsByTagName){ return; }
    var anchors = document.getElementById('content').getElementsByTagName('a');
　　　　　：

リスト3　litebox-10.js 変更箇所2（変更後）

赤色の content は、記事部分全体を括っている div 要素の id 属性を設定しています。

また、前バージョンの Lightbox JS でも「Lightbox JS の rel 属性を自動付与する」という記事を挙げてますので、参考になれば幸いです。

2007.03.01 追記
スクリプトでエラーチェックができていなかったので修正しました。