Jan 18, 2007

Litebox / Lightboxの使い方

yujiroさんとこのLiteboxやLightboxの記事で、配布されているJavaScriptファイルやCSSファイルを修正されていますが、それだとオリジナルのLitebox, Lightboxが更新されるたびに同じことをしなくてはならなくなります。

小粋空間: Litebox 1.0 の rel 属性を自動付与する

それは面倒だ、美しくないと思ってしまったので、このエントリーではもう少しスマートなやり方を書いておきます。何かの参考になる場合もあるでしょう。

まず、スタイルシートはそもそも上書きして使うものです。下のようなスタイルシートをlightbox.custom.cssとか適当な名前で生成しておき、lightbox.cssより後に読み込まれるようにしておけばオリジナルに対する変更は必要ありません(あるいはちょっと面倒くさくなりますが、スタイルシートに相当するDOM操作をJavaScriptで書くこともできますね)。

#prevLink, #nextLink{
	background: transparent url(/path/to/images/blank.gif) no-repeat;
}
#prevLink:hover, #prevLink:visited:hover {
	background: url(/path/to/images/prevlabel.gif) left 15% no-repeat;
}
#nextLink:hover, #nextLink:visited:hover {
	background: url(/path/to/images/nextlabel.gif) right 15% no-repeat;
}

また、同様にJavaScriptへの変更についても分離できます。なぜなら、変数はスコープ内であれば後からいくらでもオーバーライドすることができますし、rel="lightbox"属性をアンカー要素に追加するためのLightbox.prototype.initializeへの変更もinitLightbox関数が呼ばれる前に変換するようにすれば必要のないことだからです(厳密に言えばDOM treeを二度トラバースする分だけは非効率になります)。

具体的には以下のようなJavaScriptファイルをlitebox-1.0.custom.jsとか適当な名前で生成しておき、litebox-1.0.jsより後に読み込まれるようにしておけばよいわけです。

//
// オリジナルの変数をオーバーライド
//
fileLoadingImage = "/path/to/images/loading.gif";
fileBottomNavCloseImage = "/path/to/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');
			}
		}
	}
};

上記スクリプト中のaddRelLightboxAttribute関数は、rel="lightbox"属性をアンカー要素に追加するもので、引数のidを持つ要素内のアンカー要素のみを変換の対象とします。引数を省略するとdocument.bodyを対象に変換を行います。また、元のコードにはrel="lightbox"以外のrel属性がアンカーに付与されている場合に正しく変換されない問題がありましたが、その対処もしてあります。

というわけで、利用するときには下のようにすればよいわけです。

<html>
<head>
...
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
<script type="text/javascript" src="js/litebox-1.0.custom.js"></script>
</head>
<body onload="initLightbox()">
<div id="content">
...
</div>
</body>
</html>

必ずこういう手法を採らなければならないというわけではありませんが、導入方法の説明が容易なんじゃないかなと思います。

About Me

My Photo

つくばで働く研究者

Total Pageviews

Amazon

Copyright 2012 Ogawa::Buzz | Powered by Blogger
Design by Web2feel | Blogger Template by NewBloggerThemes.com