ディレクトリ内の写真枚数に応じて処理するにはCGIを利用します。受け取ったファイルパスを出力しますが、プログラムで出力しただけでは動作しません。出力した後にinitLightbox()を実行する必要があります。これでクリック時にLightboxが動作するようになります。（実際の
サンプルを実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Lightbox JS サンプル 4</title>
<link href="css/default.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript"><!--
window.onload = function ()
{
var url = "getfilelist.cgi?cache="+(new Date()).getTime();
new Ajax.Request(url, { method: "get", onComplete:printTag });
}
function printTag(httpObj)
{
var LF = String.fromCharCode(10);
var list = httpObj.responseText.split(LF);
var result = "";
for (var i=0; i<list.length-1; i++)
{
result += '<a href="photo/'+list[i]+'" rel="lightbox[flower]" title=""><img src="thumbnail/'+list[i]+'"></a>';
}
$("slide").innerHTML = result;
initLightbox();
}
// --></script>
</head>
<body>
<h1>Lightbox JS Sample 4</h1>
<div id="slide"></div>
</body>
</html>
[
目次へ]
(2006.6.18)