rel属性無しでLightbox JS v2.02

Lightbox2.02お試しでも使ったLightbox JS v2.02の小技をご紹介。

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

写真を綺麗な見栄えで見せてくれるツールです。

ただ、使うためには、画像にrel属性を入れないといけません。
↓こんなふうに。
<a href=”image.jpg” rel=”lightbox”>

めんどくさいです。

回避方法はいろいろあり、
Lightbox JS の rel 属性を自動付与するに詳しいのですが、

今回は Lightbox Plusに対する同様の変更： Lightbox Plus で画像を同一画面にオーバーレイして表示を参考に、
Lightbox JS v2.02のrel属性いらない版をつくりましたので公開です。

使い勝手が少し変わりました。
[従来]
・rel=”lightbox” を入れると、単品画像のLightbox化
・rel=”lightbox[hoge]” を複数の画像に入れると、グループ化

[変更後]
・画像の拡張子がjpg,gif,png,bmpなら単品画像のLightbox化
・rel=”lightbox[hoge]” を複数の画像に入れると、グループ化（従来どおり）

ソース
line.180辺りを

prev:<br />
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox')))</p>
<p>aft:<br />
if (anchor.getAttribute('href') &&<br />
( (relAttribute.toLowerCase().match('lightbox'))<br />
|| (anchor.getAttribute('href').match(/.+(jpg|gif|png)$/i)) ) )

line.330辺りを

prev:<br />
// if image is NOT part of a set..<br />
if((imageLink.getAttribute('rel') == 'lightbox'))<br />
{<br />
// add single image to imageArray<br />
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('titl')));<br />
} else{<br />
// if image is part of a set..<br />
// loop through anchors, find other images in set, and add them to imageArray<br />
for (var i=0; i<anchors><br />
</anchors>      var anchor = anchors[i];<br />
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel')))<br />
{<br />
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));<br />
}<br />
}<br />
imageArray.removeDuplicates();<br />
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}<br />
}</p>
<p>aft:<br />
// if image is part of a set..<br />
if( (imageLink.getAttribute('rel') != null) && (imageLink.getAttribute('rel') != 'lightbox' ) && (imageLink.getAttribute('rel').toLowerCase().match('lightbox')) )<br />
{<br />
// loop through anchors, find other images in set, and add them to imageArray<br />
for (var i=0; i<anchors .length;><br />
</anchors>  {<br />
var anchor = anchors[i];<br />
if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel')))<br />
{<br />
imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));<br />
}<br />
}<br />
imageArray.removeDuplicates();<br />
while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}<br />
}<br />
else<br />
{<br />
// if image is NOT part of a set..<br />
// add single image to imageArray<br />
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));<br />
}

ダウンロードは download modified Lightbox JS v2.02

added 2006/05/08 23:45
Firefoxでrel属性無し版が動作しない不具合を修正いたしました！

javascriptはC言語likeで安心します。

maaash.jp

what I create

rel属性無しでLightbox JS v2.02

Comments