Home
Autoplay CD-ROM photo album
david | caroline | daniel | chapeltown | webcam

How to create an autoplay CD photo album

I was putting some digital photos on a CD for my parents and thought "wouldn't it be nice if I could make the CD autoplay". On the face of it, it's easy. Set up an autorun.inf file pointing to a web page with some Javascript and away you go.

Wrong!

You can only "execute" an executable using autorun.inf. So, there must be another way.

There is. Many companies will charge you upwards of £20 ($30) for a little program that will do exactly that. However, RockinFewl@whirlywiryweb.com has produced a little standalone .exe which weighs in at 37k which takes, on the command line, the name of the html file on the CD and launch it via IE (well - to be precise, the registered application, so it should work with IE and Netscape)... and it's free. You can get the zipped file from http://www.whirlywiryweb.com/q/shellexe.asp.

My current Javascript routine needs all the image file names to be sequential with no gaps (so I tend not to edit the files).

This is what you do...

Create yourself a new subdirectory that will become the CD.

Copy all the image files into it.

Create a new file in the directory. Call it autorun.inf. Paste in the following two lines:

[autorun]
open=ShellExe.exe preview.htm

Now, you need preview.htm. My suggestion is something like this:

<html>
<head>
<title>Picture archive</title>
<script language="Javascript">
var imgNum;
var imgNames = new Array();
var imgCount;
var imgLow = 1156;
var imgHigh =1169;

imgCount = imgHigh - imgLow + 1;

for (i=imgLow; i<= imgHigh; i++) {
if (i < 1000) {
rootfile = 'DCP_0';
} else {
rootfile = 'DCP_';
}

imgNames[i - imgLow] = rootfile + i + '.jpg';
}
imgNum = 0;

function firstImage() {
document.all.pic.src = imgNames[0];
document.all.label.innerHTML = imgNames[imgNum];
imgNum = 0;
}

function imageLeft() {
imgNum--;
if (imgNum < 0) {
imgNum = imgCount - 1;
}
document.all.pic.src = imgNames[imgNum];
document.all.label.innerHTML = imgNames[imgNum];
}

function imageRight() {
imgNum++;
if (imgNum == imgCount) {
imgNum = 0;
}
document.all.pic.src = imgNames[imgNum];
document.all.label.innerHTML = imgNames[imgNum];
}

</script>
<body onLoad='firstImage()'>
<h1>Picture archive</h1>
<img src='left.gif' onClick='imageLeft()'><span id='label'>--- use buttons ---</span><img src='right.gif' onClick='imageRight()'>
<br>

<img src='null.gif' id='pic' width='800'>


<br clear='all'>
</body>
</html>

This file needs a bit of editing. My Kodak DC280 has image file names of the format DCP_nnnn.jpg. I look at the start and end numbers and edit the (red) 1156 and 1169 numbers in the code above to the start and end numbers in the sequence. Seeing as I was already in the hundreds when I started, the next bit was easy. I needed to pad the numeric bit of the filename to four digits. I simply did this with the blue bit of code above. The root of the image file name (in may case, DCP_ needs to be set accordingly).

All you need then is the unzipped shellexe.exe from RockinFewl's web site and three little gif files. I drew left and right arrows and have a single pixel 'null.gif', all of which need to be in your CD subdirectory (feel free to pinch mine - right click and 'save as').

You should be looking for a directory layout similar to the following screenshot:

I've got all the 100_xxxx image files, my autorun.inf, the three gif files and RockinFewls shellexe.exe. Burn this lot to the root of a new CD and off you go.

Not good enough?

I do intend writing a program which will take a directory full of photos and create all the necessary Javascript to do the job. That will allow non-sequential image files. Just don't rush me, OK?!