Sam:
That is sort of the kind of thing that PGG does. PGG is laid out for large numbers of photos, though. PGG uses some common (under Linux) command line utilities to generate the thumbnails.
In the normal version, PGG only does single directories. If you go to download it, though, there is mention of some contributed versions. One of those contributed versions can take a whole directory tree and make thumbnails and HTML pages with links that let you traverse the structure.
As for just having the html resize the main picture instead of having real thumbnails - I wouldn’t do it. Browsers aren’t terribly fast at resizing, and it can take an amazingly long time for a page with twenty or thirty pictures to load - even from the local HD.
Mort: I agree - pre-generated thumbnails are the way to go. I was just offering it as a solution in case the OP couldn’t do thumbnails.
Boo Foo Foo:
You could do exactly what you want with HTML if you want to work at it. Start an MP3 file playing , then use window.setTimout to call Javascript functions that swap pictures using a DHTML transition. The tricky part, however, would be ensuring synchronization. You don’t have any control over when the music really starts and stops, and how long it takes the pictures to load. So it might be unworkable - it depends on how synch’d you want it all to be.
Failing that, I’d use Adobe Premier or some other video editing package. You don’t have to use them just for movies. You can just put photos in along with a soundtrack, and synch transitions from one photo to the next to the exact point in the soundtrack you want. This is very easy to do in Premier.
I just got a new program today, QIC Webfotoalbum, it can take the digital photos from your camera or HD & make a great HTML site with thumbnails & upload them also & also people who look at it can send them as postcards. I gave it 800 images to do & it made the whole website in about 2 minutes.
Well, I was bored this afternoon and decided to kill an hour, so I whipped up a new HTML page that will read an unlimited number of thumbnails and display the main picture.
Here’s how it works:
Create a directory for your thumbnails
All Thumbnails must be the same name as the main image, except with a 2-letter prefix (i.e. if your main photo is ‘dad.jpg’, the thumbnail could be ‘smdad.jpg’.
Modify the ROOTDIR and THUMBDIR constants in the Javascript to point to your thumbnail and main image directories.
Modify CELLSINROW to adjust how many thumbnails you want per row, and THUMBHEIGHT and THUMBWIDTH for your thumbnail sizes.
That should be it. This was quick and dirty, and could use some cleanup. But it works. It uses the scripting filesystem object to read the files from the disk, so it will NOT work on a web page. The files must be on the same machine the HTML file is loaded from. Also, depending on your security settings you may get an annoying ActiveX warning when you first load it.
It will also not work on non-windows machines, and was only tested with IE6.
The thumbnails should appear in a scrollable window at the bottom of the page.
Hope someone finds it useful. It was fun to do, anyway. Just copy the code below, paste it to a text file, and call it whatever.html.
<html>
<head>
<style>
.thumbTable
{
align: center;
}
.thumbnail {
cursor: "hand";
align: center;
border: 1 1 1 1 inset;
}
</style>
<title>Our PhotoView Page</title>
<script language="JavaScript1.2">
var thumbString="<table class='thumbtable'>";
//Constants for setting directories to photos
var THUMBDIR = "c:\\Documents and Settings\\Dan Hanson\\Desktop\ est\ humbnails";
var ROOTDIR = "c:\\Documents and Settings\\Dan Hanson\\Desktop\ est";
//Constants for thumbnail displays
var THUMBHEIGHT = 100;
var THUMBWIDTH = 100;
var CELLSINROW = 3; //adjust for aethetics based on thumbnail size
var currentCell = 0;
function createTables()
{
var mainPhotoCell = document.getElementById("mainPhotoCell");
var thumbnails = document.getElementById("thumbnails");
createThumbnailTable();
thumbnails.innerHTML = thumbString + "</table>";
mainPhotoCell.innerHTML = "<img border=1 style='border-color:white' id='mainphoto' src='"
+ getFirstPhoto() + "' ></img>";
}
function getFirstPhoto()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fldr = fso.GetFolder(ROOTDIR);
var fc = new Enumerator(fldr.files);
return fc.item().name;
}
function createThumbnailTable()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fldr = fso.GetFolder(THUMBDIR);
var fc = new Enumerator(fldr.files);
for (; !fc.atEnd(); fc.moveNext())
{
addToThumbnailTable(fc.item());
}
}
function addToThumbnailTable(file)
{
var cellString = "<td class='thumbnail'><img height='" + THUMBHEIGHT + "' width='"
+ THUMBWIDTH + "' src='" + THUMBDIR + "\\" + file.name
+ "' onclick=changePhoto('" + stripPrefix(file.name) + "');></td>";
if (currentCell % (CELLSINROW + 1) == 0)
{
thumbString = thumbString + "<tr>";
}
thumbString += cellString;
if (currentCell++ % (CELLSINROW + 1) == CELLSINROW)
{
thumbString += "</tr>";
}
}
function stripPrefix(fileName)
{
return fileName.substring(2,fileName.length);
}
function changePhoto(img)
{
var photo = document.getElementById("mainphoto");
photo.src = img;
}
</script>
</head>
<body bgcolor=black onload="createTables()" leftmargin=0; topmargin=0;>
<table height=100% width=100%>
<tr>
<td align=center><br><font color='gray'; face='verdana'; size='6pt';>Photo Gallery</font></td>
<tr height=100%>
<td>
<table width="100%">
<tr>
<td align="center" id="mainPhotoCell"></td>
</tr>
<tr><td> <br></td></tr>
</table>
</td>
<tr>
<tr>
<td style="border: 1 1 1 1 inset">
<DIV width=800 STYLE = "height:240px; overflow: scroll; background-color: FFFEF;" border=1>
<table align=center width=800>
<tr>
<td align=center class="thumbnailCell" id="thumbnails"></td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
</body>
</html>
Well, I was bored this afternoon and decided to kill an hour, so I whipped up a new HTML page that will read an unlimited number of thumbnails and display the main picture.
Here’s how it works:
Create a directory for your thumbnails
All Thumbnails must be the same name as the main image, except with a 2-letter prefix (i.e. if your main photo is ‘dad.jpg’, the thumbnail could be ‘smdad.jpg’.
Modify the ROOTDIR and THUMBDIR constants in the Javascript to point to your thumbnail and main image directories.
Modify CELLSINROW to adjust how many thumbnails you want per row, and THUMBHEIGHT and THUMBWIDTH for your thumbnail sizes.
That should be it. This was quick and dirty, and could use some cleanup. But it works. It uses the scripting filesystem object to read the files from the disk, so it will NOT work on a web page. The files must be on the same machine the HTML file is loaded from. Also, depending on your security settings you may get an annoying ActiveX warning when you first load it.
It will also not work on non-windows machines, and was only tested with IE6.
The thumbnails should appear in a scrollable window at the bottom of the page.
Hope someone finds it useful. It was fun to do, anyway. Just copy the code below, paste it to a text file, and call it whatever.html.
<html>
<head>
<style>
.thumbTable
{
align: center;
}
.thumbnail {
cursor: "hand";
align: center;
border: 1 1 1 1 inset;
}
</style>
<title>Our PhotoView Page</title>
<script language="JavaScript1.2">
var thumbString="<table class='thumbtable'>";
//Constants for setting directories to photos
var THUMBDIR = "c:\\Documents and Settings\\Dan Hanson\\Desktop\ est\ humbnails";
var ROOTDIR = "c:\\Documents and Settings\\Dan Hanson\\Desktop\ est";
//Constants for thumbnail displays
var THUMBHEIGHT = 100;
var THUMBWIDTH = 100;
var CELLSINROW = 3; //adjust for aethetics based on thumbnail size
var currentCell = 0;
function createTables()
{
var mainPhotoCell = document.getElementById("mainPhotoCell");
var thumbnails = document.getElementById("thumbnails");
createThumbnailTable();
thumbnails.innerHTML = thumbString + "</table>";
mainPhotoCell.innerHTML = "<img border=1 style='border-color:white' id='mainphoto' src='"
+ getFirstPhoto() + "' ></img>";
}
function getFirstPhoto()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fldr = fso.GetFolder(ROOTDIR);
var fc = new Enumerator(fldr.files);
return fc.item().name;
}
function createThumbnailTable()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
var fldr = fso.GetFolder(THUMBDIR);
var fc = new Enumerator(fldr.files);
for (; !fc.atEnd(); fc.moveNext())
{
addToThumbnailTable(fc.item());
}
}
function addToThumbnailTable(file)
{
var cellString = "<td class='thumbnail'><img height='" + THUMBHEIGHT + "' width='"
+ THUMBWIDTH + "' src='" + THUMBDIR + "\\" + file.name
+ "' onclick=changePhoto('" + stripPrefix(file.name) + "');></td>";
if (currentCell % (CELLSINROW + 1) == 0)
{
thumbString = thumbString + "<tr>";
}
thumbString += cellString;
if (currentCell++ % (CELLSINROW + 1) == CELLSINROW)
{
thumbString += "</tr>";
}
}
function stripPrefix(fileName)
{
return fileName.substring(2,fileName.length);
}
function changePhoto(img)
{
var photo = document.getElementById("mainphoto");
photo.src = img;
}
</script>
</head>
<body bgcolor=black onload="createTables()" leftmargin=0; topmargin=0;>
<table height=100% width=100%>
<tr>
<td align=center><br><font color='gray'; face='verdana'; size='6pt';>Photo Gallery</font></td>
<tr height=100%>
<td>
<table width="100%">
<tr>
<td align="center" id="mainPhotoCell"></td>
</tr>
<tr><td> <br></td></tr>
</table>
</td>
<tr>
<tr>
<td style="border: 1 1 1 1 inset">
<DIV width=800 STYLE = "height:240px; overflow: scroll; background-color: FFFEF;" border=1>
<table align=center width=800>
<tr>
<td align=center class="thumbnailCell" id="thumbnails"></td>
</tr>
</table>
</DIV>
</td>
</tr>
</table>
</body>
</html>
Wow. Lots of good replies. I’ll look into these - in fact, already have - but given time constraints and other things we may just use Photoshop’s built-in utility for generating a web page(s) with thumbnails. Only problem is that as far as I can tell it will only output all thumbnails onto a single page.
I also came across this interesting freeware tool, anyone here ever heard of it? JAlbum