WebDesigning 4月号掲載のサンプルです（誌面には掲載できなかったサンプルも載せてあります）。連版画像を読み込みカタログとして表示するものです。画像に関してはページ上に掲載されているものと異なり単色のものになっています。
追加補足：プロバイダ（lolipop等）によってはファイルが見つからない場合にリダイレクトされてしまい404のエラーコードいならないことがあります。この場合、404でなく302に書き換えるか200でないという条件を記述することで正しく動作するようになります。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>連番画像ファイルを読み込み表示する[改良版]</title>
<style type = "text/css"><!--
#result {
width:600px;
}
#result img{
margin:2px;
padding:2px;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="xmlhttp.js"></script>
<script type="text/javascript"><!--
function loadImageFile(filename)
{
imagePath = "images/"+filename+".jpg";
httpObj = createXMLHttpRequest();
httpObj.onreadystatechange = displayImage;
httpObj.open("GET",imagePath,true);
httpObj.send(null);
}
function displayImage()
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
count++;
loadImageFile(count);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404)) displayCatalog();
}
function setCatalog()
{
count = 0; // 画像開始番号
loadImageFile(count);
}
function displayCatalog()
{
resultData = "";
for (var imageNo=0; imageNo<count; imageNo++)
{
resultData += '<img src="images/'+imageNo+'.jpg">';
}
document.getElementById("result").innerHTML = resultData;
}
// --></script>
</head>
<body onload="setCatalog()">
<h1>連番画像ファイルを読み込み表示する</h1>
<div id="result"></div>
</body>
</html>
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>連番画像ファイルを読み込み表示する[prototype版]</title>
<style type = "text/css"><!--
#result {
width:600px;
}
#result img{
margin:2px;
padding:2px;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadImageFile(filename)
{
imagePath = "images/"+filename+".jpg";
new Ajax.Request(imagePath, { method: 'get', onComplete: displayImage });
}
function displayImage(httpObj)
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
count++;
loadImageFile(count);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404)) displayCatalog();
}
function setCatalog()
{
count = 0; // 画像開始番号
loadImageFile(count);
}
function displayCatalog()
{
resultData = "";
for (var imageNo=0; imageNo<count; imageNo++)
{
resultData += '<img src="images/'+imageNo+'.jpg">';
}
document.getElementById("result").innerHTML = resultData;
}
// --></script>
</head>
<body onload="setCatalog()">
<h1>連番画像ファイルを読み込み表示する</h1>
<div id="result"></div>
</body>
</html>
【サンプルを実行する】(キャッシュしないようにしたもの）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>連番画像ファイルを読み込み表示する[prototype版]</title>
<style type = "text/css"><!--
#result {
width:600px;
}
#result img{
margin:2px;
padding:2px;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadImageFile(filename)
{
imagePath = "images/"+filename+".jpg?cache="+(new Date()).getTime();
new Ajax.Request(imagePath, { method: 'get', onComplete: displayImage });
}
function displayImage(httpObj)
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
count++;
loadImageFile(count);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404)) displayCatalog();
}
function setCatalog()
{
count = 0; // 画像開始番号
loadImageFile(count);
}
function displayCatalog()
{
resultData = "";
for (var imageNo=0; imageNo<count; imageNo++)
{
resultData += '<img src="images/'+imageNo+'.jpg">';
}
document.getElementById("result").innerHTML = resultData;
}
// --></script>
</head>
<body onload="setCatalog()">
<h1>連番画像ファイルを読み込み表示する</h1>
<div id="result"></div>
</body>
</html>
【サンプルを実行する】(リンク版。キャッシュしないようにしたもの）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=shift_jis">
<title>連番画像ファイルを読み込み表示する[リンク版]</title>
<style type = "text/css"><!--
#result {
width:600px;
}
#result img{
margin:2px;
padding:2px;
border:1px solid black;
}
--></style>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript"><!--
function loadImageFile(filename)
{
imagePath = "images/"+filename+".jpg?cache="+(new Date()).getTime();
new Ajax.Request(imagePath, { method: 'get', onComplete: displayImage });
}
function displayImage(httpObj)
{
if ((httpObj.readyState == 4) && (httpObj.status == 200))
{
count++;
loadImageFile(count);
}
if ((httpObj.readyState == 4) && (httpObj.status == 404)) displayCatalog();
}
function setCatalog()
{
count = 0; // 画像開始番号
loadImageFile(count);
}
function displayCatalog()
{
resultData = "";
for (var imageNo=0; imageNo<count; imageNo++)
{
resultData += '<a href="images/'+imageNo+'.jpg"><img src="images/'+imageNo+'.jpg"></a>';
}
document.getElementById("result").innerHTML = resultData;
}
// --></script>
</head>
<body onload="setCatalog()">
<h1>連番画像ファイルを読み込み表示する[リンク版]</h1>
<div id="result"></div>
</body>
</html>
以下のスクリプトはPhotoshop CS以降で自動的に連番JPEG画像を生成するスクリプトです。連番画像ファイルを生成するようなことがあれば利用してみてください。ランダムに色は決定されます。
// Photoshop Make Image
preferences.rulerUnits = Units.PIXELS;
docObj = documents.add(120,80);
activeDocument.selection.selectAll();
RGBColor = new SolidColor();
for (i=0; i<99; i++)
{
RGBColor.red = Math.floor(Math.random()*255);
RGBColor.green = Math.floor(Math.random()*255);
RGBColor.blue = Math.floor(Math.random()*255);
activeDocument.selection.fill(RGBColor,ColorBlendMode.NORMAL, 100, false);
fileObj = new File("~/Desktop/0001/"+i+".jpg");
jpegOpt = new JPEGSaveOptions();
jpegOpt.embedColorProfile = true;
jpegOpt.quality = 5;
jpegOpt.formatOptions = FormatOptions.PROGRESSIVE;
jpegOpt.scans = 3;
jpegOpt.matte = MatteType.NONE;
activeDocument.saveAs(fileObj, jpegOpt, true, Extension.LOWERCASE);
}