Tipset

最近巷でよく見かけるLightbox風プラグイン

サイト移転前に使ってたLitebox plugin for Wordpressは，元祖のLightbox 2.0 for WordPressと比べると約3KBと超軽量なのが気に入ってたが，いちいちrel="lightbox"を書くのが面倒で使わなくなってしまった

とはいえLightboxは便利やから欲しいし，でもコレまで書いた記事全部にタグ付けるのは面倒・・・
って思ってたら，こんなサイトがっ！！

Litebox用に自動でrel="lightbox"属性を付ける方法はアチコチで紹介されていて珍しくないけど，このサイトで紹介されているスタイルシートやJavaScriptの本質を見抜いたやり方は美しい（書かれたご本人もそういっている） 
ということで，さっそくマネさせてもらった

詳細はサイトで解説されているので，以下は自分用にメモ

まず，gblitebox/css ディレクトリの中に lightbox.custom.css という名前で下記の内容のファイルを作成

#prevLink, #nextLink{
background: transparent url(/~h2/wp-content/plugins/gblitebox/images/blank.gif) no-repeat;
}
#prevLink:hover, #prevLink:visited:hover {
background: url(/~h2/wp-content/plugins/gblitebox/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
background: url(/~h2/wp-content/plugins/gblitebox/images/nextlabel.gif) right 15% no-repeat;
}

次に，gblitebox/js ディレクトリの中に litebox-1.0.custom.js という名前で下記の内容のファイルを作成 

//
// オリジナルの変数をオーバーライド
//
fileLoadingImage = "/~h2/wp-content/plugins/gblitebox/images/loading.gif";
fileBottomNavCloseImage = "/~h2/wp-content/plugins/gblitebox/images/closelabel.gif";
//
// オリジナルのinitLightbox関数をオーバーライド
//
initLightbox = function() {
addRelLightboxAttribute('content');
myLightbox = new Lightbox();
};
//
// rel="lightbox"属性をanchor要素に付加
//
addRelLightboxAttribute = function(id) {
if (!document.getElementsByTagName) { return; }
var ele;
if (id) {
ele = $(id);
if (!ele) { return; }
} else {
ele = document.body;
}
var anchors = ele.getElementsByTagName('a');
for (var i = 0; i < anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute('href').match(/jpg$|gif$|png$/)) {
var rel = String(anchor.getAttribute('rel'));
if (!rel.toLowerCase().match('lightbox')) {
anchor.setAttribute('rel', rel ? rel+' lightbox' : 'lightbox');
}
}
}
};

<link rel=\"stylesheet\" href=\"".$litebox_path."css/lightbox.css\" type=\"text/css\" media=\"screen\" />
<link rel=\"stylesheet\" href=\"".$litebox_path."css/lightbox.custom.css\" type=\"text/css\" media=\"screen\" />
・・・
<script type=\"text/javascript\" src=\"".$litebox_path."js/litebox-1.0.js\"></script>
<script type=\"text/javascript\" src=\"".$litebox_path."js/litebox-1.0.custom.js\"></script>