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

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

Posted at January 8,2007 2:00 AM
Tag:[CSS, JavaScript, Litebox]

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

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

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

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

     :
// 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;}
    }
}
     :

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

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

リスト2 litebox-10.js 変更箇所2(変更前)

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

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

リスト3 litebox-10.js 変更箇所2(変更後)

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

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

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

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

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


トラックバック

[wordpress]WordPressにlitebox-1.0を入れました。 from akira20の日記
画像のサムネイルをクリックすると、びよーんとメイン画像が現れてきます。 かなりcool。 liteboxがあって、lightbox2もある。 light... [続きを読む]

Tracked on January 17, 2007 3:33 AM

Litebox/Lightboxの使い方 from Ogawa::Memoranda
yujiroさんとこのLiteboxやLightboxの記事で、割と気ままに配布されているJavaScriptファイルやCSSファイルを修正されていますが... [続きを読む]

Tracked on January 18, 2007 5:41 PM

Litebox 1.0を適用してみました。 from Imagine*JucuL
大分前(昨年半ばぐらい?)から、Movable Type仕様のブログを覗いた時に見かけた、記事本文中にあるサムネイル画像をクリックすると新しいウインドウを... [続きを読む]

Tracked on March 3, 2007 1:22 AM

Liteboxを導入してみました。 from どりぱけ。
暇だからこのブログの情報調べてみた。 で紹介したaguseというサイト。http://www.aguse.net/ ここでサイトの検索するとサイ... [続きを読む]

Tracked on March 22, 2007 9:28 PM

忍者ブログにlightbox2を導入 from croix
以前記事にも書いたlightboxですが、忍者ブログに導入してみました。 導入方法は後日記事として書きます。 取りあえずテストも兼ねて画像を貼ってみま... [続きを読む]

Tracked on July 4, 2007 5:58 PM

Movable Type Liteboxを導入 from ブロッけんJr
ウェブでおなじみのLiteboxを導入してみました。↓画像をクリックす... [続きを読む]

Tracked on September 22, 2009 12:14 PM
コメントする
greeting

*必須

*必須(非表示)


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

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

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

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