blog@slightlyblue: 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"><img alt="image.jpg" src="image.jpg" /></a>

めんどくさいです。

回避方法はいろいろあり、
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:
if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox')))

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

line.330辺りを

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

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

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

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

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

blog@slightlyblue

rel属性無しでLightbox JS v2.02

TrackBack

Comment