ホームページ制作 SiGT Web Studio (横浜/フリーランス) > Blog > web制作 > jQuery lightBox pluginでprototype版世代のrelグループセットを有効にする方法

横浜のフリーランスWeb制作者ブログ

2010年 3月 09日

jQuery lightBox pluginでprototype版世代のrelグループセットを有効にする方法


割と感動したのでメモ。

このサイトでも度々使用している、画像の拡大表示やスライドショーを実装する「lightbox」。数年前からprototype.js版で存在していたのですが、今やjavascriptライブラリと言えばjQuery!と、いうことでこのサイトのlightboxは最初からjQuery版lightboxなのです。


lightboxは画像を拡大表示したりスライドショーを簡単に実装するスクリプトです

当サイトで使用しているのは
jQuery lightBox plugin 0.5
※jQuery版lightboxにはいろんな作者のいろんなバージョンがあります

実装は極めて簡単なのですが、一つ問題があります。

旧来のprototype版では、rel="lightbox[hogehoge]"と書くだけでグループセットが作れていました。

1
2
3
4
<a href="1.jpg" rel="lightbox[group1]" title="グループ1">image1</a>
<a href="2.jpg" rel="lightbox[group1]" title="グループ1">image2</a>
<a href="3.jpg" rel="lightbox[group2]" title="グループ2">image3</a>
<a href="4.jpg" rel="lightbox[group2]" title="グループ2">image4</a>

このグループ分けがjQuery lightBox plugin 0.5では無効になってしまい、基本的な使い方では同じページ内の画像であれば全て一つのグループとして認識されてしまいます。一番困るのは、ブログで複数の記事がアーカイブ表示されていて、画像をスライドショーで見ると他の記事の画像までひとまとまりにされてしまう点ですね。

グループ毎にclassを変えて、headerに

1
2
3
4
5
6
    $(function() {
        $('a.lightbox1').lightBox();
        $('a.lightbox2').lightBox();
        .
        .
        .

などと加えていく手もありますが、あまりに非効率です。prototype版から乗り換えたいという人も多いでしょうし、何か良い手は無いのでしょうか。

ありました。

How-to modify jQuery Lightbox Plugin to use Image Setsfatlab様)

記事上では、まずjquery.lightbox-0.5.jsの79~82行目を以下に置き換えています。

79
80
81
82
83
84
    // Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that storage the images references
    for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
        if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
            settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
        }
    }

その上で、HTMLヘッダーでlightboxへのアクセスを以下のみとします。

1
2
3
4
    $(function() {
        // Select all links whose attribute rel starts with lightbox
        $('a[rel^=lightbox]').lightBox();
    });

これで、旧来のrelを使ったグループ分けが復活します。凄い!

なお、WordPressで

1
<a href="1.jpg" rel="lightbox[group1]" title="グループ1">image1</a>

とした際、条件によっては]"の部分が化けてしまうことがありました。ので、可能であれば

1
<a href="1.jpg" rel="lightbox-group1" title="グループ1">image1</a>

のように[]を使用しないパターンに置換したほうが良いかも知れません。

 

…初めてじゃないか、Web制作らしい話題が。

Posted: 2010年 3月 09日 15:27

Tagged with , ,


Categories: web制作

Comments: 2 comments


トラックバックURL

コメント & トラックバック

ありがとうございます!
現在制作中のサイトでこの問題に直面していまして…。
とても参考になりました。

tomi様
はじめまして!
「jQuery lightbox グループ…」といった検索でご覧になられる方が、本当に多いようで、皆さん同じように困ってるんだなぁ、と思っておりました。
配布元が次期バージョンでこの問題にも対応してくれるとなお嬉しいですね。

コメント





コメント本文に次の(X)HTMLタグを使えます:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Gravatarに登録されているアバターを使用します。

Additional comments powered byBackType