HOME > 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 Sets（fatlab様）

記事上では、まず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