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

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

Posted at March 23,2006 1:25 PM
Tag:[Customize, JavaScript, Lightbox]

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

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

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

1.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.jpLightbox Plus で画像を同一画面にオーバーレイして表示

2.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;
 }

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

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

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

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

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

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

sideblue weblog[sb2] Addrel v0.01

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

http://www2.pf-x.net/~caetla/sb/log/eid22.html from てぃあら
ここ で導入した Lightbox JS、アンカータグに rel="lightbox" を いちいち追加しなくてもイメージ挿入時に 自動的に rel="l... [続きを読む]

Tracked on March 24, 2006 10:48 AM

[blog] Lightbox Plus の導入 from まみむめも
ちょっと前から当blogでも導入してたのですが記事として残していませんでしたので。。 Lightbox Plusについてはこの辺にて。。 要はサムネイル... [続きを読む]

Tracked on March 31, 2006 10:44 AM

Lightbox JS を利用して画像表示してみた from ツール・ド・もんち - Tour De MonChi -
先日、画像のポップアップで"Internal Server Error"が発生し... [続きを読む]

Tracked on April 10, 2006 11:51 PM

rel tag無しでLightbox JS v2.02 from blog@slightlyblue
Lightbox2.02お試しでも使ったLightbox JS v2.02の小技... [続きを読む]

Tracked on May 3, 2006 10:38 AM

画像をクールに from なんとなく本音とか建前とかでトーク
rel 属性なしで起動させる [続きを読む]

Tracked on November 9, 2006 8:16 PM

Lightbox JS V2.02 from Hope Bridge
Lightbox Js V2.02へアップグレードしましたので、改めてシンプル版... [続きを読む]

Tracked on March 7, 2007 8:14 PM
コメント

音楽家のyujiroさんがなんでこうも?といってもさっぱり理解できないことが圧倒的に多いのですが?詳しいのか、いつも驚かされます。

「小粋空間」のなかでそこら辺りのことが記載されているエントリーがあれば教えてください。

[1] Posted by oyaji : March 23, 2006 6:59 PM

>oyajiさん
こんばんは。
(質問の意図を間違えていなければ)私の拙い技術力をひけらかすような記事は残念ながらありません。
あえて申し上げるとすれば、このブログ自体に培ったものが凝縮されていると言えます(少なくとも開設当初はCSSやXHTMLの知識は皆無でした)。

[2] Posted by yujiro : March 24, 2006 12:46 AM

>yujiroさん

まいど。w

[3] Posted by Border. : March 24, 2006 9:59 AM

こんにちは?。SereneBach で Lightbox JS 使ってるので
4番のリンクから プラグインいただいてきました。

[4] Posted by さえら : March 24, 2006 10:46 AM

>Border.さん
どうもです。
トラックバック忘れてました。(笑)

>さえらさん
ご経由ありがとうございます。
色々なプラグインありますね?。

[5] Posted by yujiro : March 25, 2006 1:20 AM

記事参照&トラックバックどうもです。(笑)

[6] Posted by Border. : March 31, 2006 1:26 AM

>Border.さん
どこかでみたようなコメントが…(笑)

[7] Posted by yujiro : April 1, 2006 2:30 AM

yujiroさん、こんにちわ。
昨日、当該エントリーのrel属性の自動付与の作業を実施して気付いた点です。
三番目の方法"我楽:coolに画像を表示する"で進めようとしたのですが、いくらCMS.pmを弄ってもアップロード画面にタグ等が反映されないので、プラグイン"Better File Uploader"を利用しないにしたら解決しました。
どうやら、このプラグインでタグの生成・出力がされるようで、素人ながらプラグインを見よう見真似で弄ったら、rel属性の自動付与ができるようになりました。
プラグインを改造していいものなのか悩みましたが、自分だけが利用するという前提で弄ってみました。
自分には解決策を示すほどの知識はありませんで、このような例もあると言うことでだけ報告いたします。

[8] Posted by もんち : April 10, 2006 6:38 PM

>もんちさん
こんにちは。
情報ありがとうございました。
改変については、Better File Uploader プラグインの示すライセンスに基づいて行えば大丈夫だと思います。

[9] Posted by yujiro : April 11, 2006 12:42 PM

いつもお世話になっております。「Lightbox Js」がヴァージョンアップして「Lightbox JS v2.02」がすごい変わった動きをしてなかなかおもしろと思います。(http://www.huddletogether.com/projects/lightbox2/)

そこで、私もトライしてみたのですがやはり表示のしかたがおかしい感じになります。というのも画像は表示されるのですが、表示した画像のバックに白い帯が横に長く表示されてしまいます。
また、このスクリプトも通常のタグで自動で反映させたいとも思うのですがどのようにカスタマイズすればいいでしょうか?
お手数ですが上記2点サポート宜しくお願いします。

[10] Posted by panser : May 6, 2006 1:23 AM

-前コメントの追記-

私のBlogの5月5日の焼酎という記事の画像にカスタマイズしておりますので不具合の感じを見て頂きたいと思います。宜しくお願い致します。

[11] Posted by panser : May 6, 2006 1:28 AM

>panserさん
こんばんは。
ご質問の件ですが、styles-site.css の最後に記述されている lightbox の設定が影響しているようです(lightbox.css に設定されている内容が重複しています)。
内容にもよりますが、少しずつ確認されながら設定されてみてはいかがでしょうか。

以上です。
それではどうぞよろしくお願い致します。

[12] Posted by yujiro : May 8, 2006 10:33 PM

いつもお世話になっております。いつも丁寧なご指摘ありがとうございます。私のミスでばかりで毎回ご迷惑おかけしてばかりで本当にすみません。これからは、ソースの見直しも心がけるようにしたいと思います。ありがとうございました。

[13] Posted by panser : May 9, 2006 1:46 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)