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

Lightbox JS の rel 属性を自動付与する

Lightbox JS を起動するには a 要素の rel 属性に "lightbox" を付与しなければならないという条件がありますが、手動で付与するのは結構面倒です。

ということでご質問を頂きましたので、rel 属性を自動付与する（あるいは rel 属性を付与せずに Lightbox を起動する）方法をいくつかご紹介します。

1. rel 属性なしで Lightbox JS を起動する
2. Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する
3. Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する
4. Serene Bach の画像リンクに rel 属性を自動付与するプラグイン

１．rel 属性なしで Lightbox JS を起動する

ページ内にある全ての画像リンクに対し、Lightbox JS を起動する方法です。a 要素の href 属性の末尾が jpg/gif/png の場合、Lightbox JS を起動するようにしています。

変更方法は、lightbox.js の293行目辺りにある下記の赤色部分、

// loop through all anchor tags
for (var i=0; i<anchors.length; i++){
    var anchor = anchors[i];
 
    if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
        anchor.onclick = function () {showLightbox(this); return false;}
    }
}

を青色に修正します。

// 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.onclick = function () {showLightbox(this); return false;}
    }
}

パッチを使える方は以下のパッチをご利用ください。

--- lightbox.js.bak     Thu Mar 23 11:44:29 2006
+++ lightbox.js Thu Mar 23 12:52:09 2006
@@ -289,7 +289,7 @@
        for (var i=0; i<anchors.length; i++){
                var anchor = anchors[i];
 
-               if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "lightbox")){
+               if (anchor.getAttribute("href") && anchor.getAttribute("href").match(/jpg$|gif$|png$/)){
                        anchor.onclick = function () {showLightbox(this); return false;}
                }
        }

この修正は、rel 属性を付与せずに Lightbox PLUS を起動できる下記の hack を参考にさせて頂きました。ありがとうございました。

drk7.jp：Lightbox Plus で画像を同一画面にオーバーレイして表示

２．Movable Type のアンカータグ挿入ボタンに rel 属性を自動付与する

Movable Type のエントリー編集画面のアンカータグ挿入ボタン（a href="～"）利用時に rel 属性を自動的に付与します。このボタンは画像リンク以外のリンクでも使用することがあるので、href 属性の内容の末尾が jpg/gif/png の場合のみ rel 属性を付与するようにしてします。

変更方法は、mt-static/mt_ja.js（3.17xの場合はローカル・サイト・パス配下の mt.js） を任意のエディタで開いて、赤色部分のコード

　　　　　　：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
     if (str == '') str = my_link;
     if (isMail) my_link = 'mailto:' + my_link;
    setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
　　　　　　：

を青色のコードに変更してください。

　　　　　　：
var my_link = prompt(isMail ? 'Enter email address:' : 'Enter URL:', link);
if (my_link != null) {
     if (str == '') str = my_link;
     if (isMail) my_link = 'mailto:' + my_link;
     my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
                                       setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
}
return false;
　　　　　　：

パッチを使える方は以下のパッチをご利用ください。

--- mt_ja.js.bak        Wed Oct 12 13:34:52 2005
+++ mt_ja.js    Thu Mar 23 11:09:26 2006
@@ -279,7 +279,8 @@
     if (my_link != null) {
          if (str == '') str = my_link;
          if (isMail) my_link = 'mailto:' + my_link;
-        setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
+         my_link.match(/jpg$|gif$|png$/) ? setSelection(e, '<a href="' + my_link + '" rel="lightbox">' + str + '</a>') :
+                                           setSelection(e, '<a href="' + my_link + '">' + str + '</a>');
     }
     return false;
 }

３．Movable Type のアップロード画面からのサムネール画像リンクに rel 属性を自動付与する

Movable Type のアップロード画面からサムネール画像リンクを生成した場合に rel 属性を自動付与する方法です。このカスタマイズについては下記を参照ください。

我楽：coolに画像を表示する。

なおサムネール画像作成には ImageMagic または NetPBM がインストールされていることが必要です。

４．Serene Bach の画像リンクに rel 属性を自動付与するプラグイン

Serene Bach の場合、下記のサイトで配布されているプラグインが便利です。

sideblue weblog：[sb2] Addrel v0.01