画像をニュっとオサレに拡大するって事でもはや標準装備が普通となった
「Lightbox」ですが、これは元々はprototypeというJavascriptライブラリを使ったもの。
しかし、こいつは今はほとんど主流といってもいいJQueryと共に使うには
コンフリクトを起こすのでいかんせんめんどくさい物がある。
（色々と書き換えてやらなければいけない）

JQueryをふんだんに使ったサイトなどでLightboxを使いたい、って場合には
幸いにして最近はJQuery版のLightboxなんぞもリリースされていますので
もっぱらそっちを使う事の方が多いです。

jQuery lightBox plugin 0.5(http://leandrovieira.com/projects/jquery/lightbox/)

ただ、こいつはprototype版の機能を全て引き継いでいるわけではなく

<a href=”001.jpg” rel=”lightbox&#91;group1&#93;” title=”グループ1″>image1</a>
<a href=”002.jpg” rel=”lightbox&#91;group1&#93;” title=”グループ1″>image2</a>
<a href=”003.jpg” rel=”lightbox&#91;group2&#93;” title=”グループ2″>image3</a>
<a href=”004.jpg” rel=”lightbox&#91;group2&#93;” title=”グループ2″>image4</a>

というようにrel部分に[グループ名]をつける事で簡単にグルーピングできていたのが
JQuery版の標準機能ではできないのがたまにキズ。

今まで膨大にグループ分けしていたprototype版のLightboxを使用したサイトを
JQuery版に乗り換える場合、非常に困った事になってしまうのであります。

そこでこのjQuery lightBox plugin 0.5の一部を書き換えてしまおうという小技。

まずはjquery.lightbox-0.5.jsの79～82行目

// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
for ( var i = 0; i &lt; jQueryMatchedObj.length; i++ ) {
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
}
}

の部分を

// 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 &lt; 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側のHead部分を

<script type="text/javascript">
$(function() {
$('a[rel^=lightbox]').lightBox();
});
</script>

と書き換えてやれば、見事にグルーピング可能になります。