これがあなたの質問に対する回答ではないことは承知していますが、将来的に役立つ可能性があります。
画像ごとに個別のファイルを作成すると大きな問題があります。これらすべてのファイルを編集するのがどれほど大変かがわかったはずです。それを実装するためのより良い方法があります。より良い方法は、ある種のテンプレートを使用することです。その後、テンプレートを編集してからファイルを再生成するだけです。
ただし、それをスキップして、誰かが要求したときにスクリプトに動的にページを作成させることができます。
以下に、私が作成した簡単な php スクリプトを示します。これで作業を開始できます。すべての画像を配列 $images に追加するだけで、必要なページが動的に作成されます。
<?php
// Add all images here. Asumes that thumbnails and full size images
// has the same name and is placed in "thumbnails/" and "images/"
$images = Array(
Array('src'=>'hamilton_historical_photos_1.jpg', 'title' => 'Title of photo 1'),
Array('src'=>'hamilton_historical_photos_2.jpg', 'title' => 'Title of photo 2'),
Array('src'=>'hamilton_historical_photos_4.jpg', 'title' => 'Title of photo 4')
);
// Using a seach-variable of 'image' to show a specific image'
// Note: Arrays are indexed from 0, but we want to be friendly and show
// the first image when image=1. Therefore 1 must be subtracted to get the
// real index.
$idx = @$_GET['image'] -1;
// Get information about the image. If the index is wrong we don't get
// any information. That is used later in the code when testing if
// $image has a value or not.
$image = @$images[ $idx ];
// Default title
$title = "Township of Hamilton Historical photos";
// If an image was found, add that to the title.
if ($image) $title .= " - " . $image['title'];
?>
<!doctype html>
<html>
<head>
<title><?php echo $title; ?></title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript">
google_ad_client = "ca-pub-2656154241161799";
/* 160x600, created 1/31/09 */
google_ad_slot = "6877855916";
google_ad_width = 160;
google_ad_height = 600;
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
<style type="text/css">
.thumbnails {
text-align:center;
}
.thumbnails img {
vertical-align:middle;
}
</style>
</head>
<body>
<?php
// Get number of images
$max = count($images);
// Test if an image was seleted, if so show that image.
if ($image) {
echo "<div class='textbg'>$title</div>";
echo "<div class='textreg'>";
$sep = " | ";
// 'First' should be a link if we aren't on the first image
$label = "First";
if ($idx == 0) echo $label; else echo "<a href='?image=1'>$label</a>";
echo $sep;
// 'Previous Picture' should be a link if we aren't on the first image
$label = "Previous Picture";
if ($idx == 0) echo $label; else echo "<a href='?image=" . $idx . "'>$label</a>";
echo $sep;
// 'Next Picture' should be a link if we aren't on the last image
$label = "Next Picture";
if (($idx+1) == $max) echo $label; else echo "<a href='?image=" . ($idx +2) . "'>$label</a>";
echo $sep;
// 'Last' should be a link if we aren't on the last image
$label = "Last";
if (($idx+1) == $max) echo $label; else echo "<a href='?image=" . $max . "'>$label</a>";
echo $sep;
echo "<a href='?'>Thumbnails</a>";
echo "</div>";
echo "<hr size='1'>";
echo "<a href='?'>" .
"<img " .
"src='images/" . htmlspecialchars($image['src']) . "' " .
"title='" . htmlspecialchars($image['title']) . "'" .
">" .
"</a>";
} else {
// Showing thumbnails
echo "<div class='textbg'>Twp of Hamilton Historical Pictures</div>";
echo "<span class='auto-style2'><a href='http://www.hamiltonhistorical.com'>Hamilton Historical Website</a></span>";
echo "<span class='textbg'> ($max images) </span>";
echo "<hr size='1'>";
echo "<div class='thumbnails'>";
echo "<div class='textreg'>Click a picture to see a larger view.</div>";
foreach ($images as $idx => $image) {
$idx = $idx + 1;
echo "<a href='?image=$idx'>" .
"<img " .
"src='thumbnails/" . htmlspecialchars($image['src']) . "' " .
"title='" . htmlspecialchars($image['title']) . "'" .
">" .
"</a>";
}
echo "</div>";
}
?>
</body>
</html>