<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>画像カタログ</title>
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript"><!--
maxCount = 9; // 一度に表示する最大枚数
function loadImageFile()
{
var filename = "getFileList.rb?cache="+(new Date()).getTime();
new Ajax.Request(filename, { method: "get", onComplete: getFilename });
}
function getFilename(httpObj)
{
var LF = String.fromCharCode(10);
fileList = httpObj.responseText.split(LF);
count = fileList.length - 1;
$("pageArea").innerHTML = "";
count--;
pageMax = Math.floor((count + maxCount - 1) / maxCount);
for (var i=1; i<=pageMax; i++)
{
var startNo = (i-1)*maxCount+1;
var endNo = startNo + maxCount;
var mod = count % maxCount;
if ((i == pageMax) && (mod > 0)) endNo = startNo + mod;
var aTag = "|<a href='javascript:viewImage("+startNo+","+endNo+")'>"+i+"</a>";
$("pageArea").innerHTML += aTag;
}
$("pageArea").innerHTML += "|";
viewImage(1,maxCount+1);
}
function viewImage(startNo, endNo)
{
var q = String.fromCharCode(22);
$("imageArea").innerHTML = "";
for (var i=startNo; i<endNo; i++)
{
var aTag = "<a href=javascript:viewPhoto('"+fileList[i]+"')><img src='"+fileList[i]+"'></a>";
$("imageArea").innerHTML += aTag;
}
}
function viewPhoto(sURL)
{
new Effect.SlideDown($("photoArea"));
$("photoArea").innerHTML = "<img src='"+sURL+"'>";
}
window.onload = function()
{
$("photoArea").onclick = function(){ new Effect.SlideUp(this) };
loadImageFile();
}
// --></script>
</head>
<body>
<h1>画像カタログ</h1>
<div id="pageArea"></div>
<div id="imageArea"></div>
<div id="photoArea"><span></span></div>
</body>
</html>
説明などは本書を参考にしてください。