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:
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