<!-- TWO STEPS TO INSTALL PHOTO ALBUM:
1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jennifer Stuart (jenniferstuart( at )yahoo.com) -->
<! >
<! >
<!-- Begin
/*************************************************************************
I N S T R U C T I O N S:
1) Save your LARGE photos as JPEGS, and name them
sequentially with the word "picture" before the number and
.jpg as the extension. (ie. picture1.jpg, picture2.jpg, picture3.jpg)
(For netscape compatibility - make sure all pictures are the same
size! suggestion: Pick a width or height to be constant and fill in
the rest with white space... see demo for example of doing this)
2) Save your THUMBNAIL photos as JPEGS, and name them
sequentially with the word "small" before the number and .jpg
as the extension. (ie. small1.jpg, small2.jpg, small3.jpg)
3) Upload all the images and this script to the same directory
************************************************************************/
totalPictures = 6; // Number of pictures
albumName = "My Pictures"; // Name of Photo Album
subheadName = "From: 7/01/00 - 8/01-00"; // Sub-title
numThumbnailsPerRow = 3;
font = "Arial, Helvetica, sans-serif";
leftArrowNormal = "leftarrow.gif";
leftArrowGray = "leftarrowgray.gif";
rightArrowNormal = "rightarrow.gif";
rightArrowGray = "rightarrowgray.gif";
backArrow = "back.gif";
function openInsidePage(i) {
var albumName = this.albumName;
var pageName = this.pageName;
var totalPictures = this.totalPictures;
with (document) {
open();
writeln('<HTML><HEAD>');
writeln('<TITLE>' + albumName + '</TITLE>');
writeln('<script language="JavaScript">');
writeln('\<\!\-\-');
writeln('var totalPictures = ' + totalPictures);
writeln('var currentPicture = ' + i);
writeln('function previousImage() {');
writeln('if (currentPicture != 1) {');
writeln('currentPicture--;');
writeln('document.mainimage.src = "picture" + currentPicture + ".jpg";');
writeln('document.next.src = "' + rightArrowNormal + '";');
writeln('if (currentPicture == 1) {');
writeln('document.previous.src = "' + leftArrowGray + '"');
writeln('}}}');
writeln('function nextImage() {');
writeln('if (currentPicture != totalPictures) {');
writeln('currentPicture++');
writeln('document.mainimage.src = "picture" + currentPicture + ".jpg"');
writeln('document.previous.src = "' + leftArrowNormal + '"');
writeln('if (totalPictures == currentPicture) {');
writeln('document.next.src = "' + rightArrowGray + '"');
writeln('}}}');
writeln('\/\/ \-\->');
writeln('<\/script>');
writeln('</head>');
writeln('<div align=center>');
writeln('<h1><font face="' + font + '">~ ' + albumName + ' ~</font></h1>');
writeln('<table width=100 border=0 cellspacing=0 cellpadding=3>');
writeln('<tr>');
writeln('<td bgcolor="#FFFFFF"><img src="picture' + i + '.jpg" name=mainimage></td>');
writeln('</tr>');
writeln('<tr valign=middle align=center>');
leftarrow = (i == 1) ? leftArrowGray : leftArrowNormal;
writeln('<td bgcolor="#FFFFFF"><center><a href="javascript:previousImage();"><img src="' + leftarrow + '" alt= "Previous" width=49 height=43 border=0 name=previous></a>');
writeln(' ');
writeln('<a href="javascript:window.location.href=window.location.href;"><img src="' + backArrow + '" width=51 height=44 border = "0"></a>');
writeln(' ');
rightarrow = (i == totalPictures) ? rightArrowGray : rightArrowNormal;
writeln('<a href="javascript:nextImage();"><img src="' + rightarrow + '" width=52 height=44 border=0 name=next></a></center></td>');
writeln('</tr></table>');
writeln('</div>');
writeln('</body>');
writeln('</html>');
close();
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<! >
<! >
<!-- Begin
document.write('<div align=center>');
document.write('<h1><font face="' + font + '">~ ' + albumName + ' ~ </font></h1>');
document.write('<h4><font face="' + font + '">' + subheadName + '</font></h4>');
document.write('<table width=500>');
var numOfRows;
var numOfPicsDiv = totalPictures / 4;
if (numOfPicsDiv > parseInt(numOfPicsDiv)) {
numOfRows = parseInt(numOfPicsDiv) + 1;
} else {
numOfRows = numOfPicsDiv;
}
var thisPic = 1;
var helpCount = 1;
for (i = 1; i <= numOfRows; i++) {
document.write('<tr align=center valign=bottom>');
for (thumbCount = 1; thumbCount <= numThumbnailsPerRow; thumbCount++) {
if (thisPic <= totalPictures) {
document.write('<td><a href="javascript:openInsidePage(' + thisPic + ')"><img src="small' + thisPic + '.jpg" border=0></a></td>');
thisPic++;
} else {
document.write('<td> </td>');
thisPic++;
}
}
thisPic = helpCount;
document.write('</tr>');
document.write('<tr align = center valign = top>');
for (textCount = 1; textCount <= numThumbnailsPerRow; textCount++) {
if (thisPic <= totalPictures) {
document.write('<td><b><font face="' + font + '"><a href="javascript:openInsidePage(' + thisPic + ')">Image ' + thisPic + '</a></font></b></td>');
thisPic++;
} else {
document.write('<td> </td>');
thisPic++;
}
}
document.write('</tr>');
helpCount = helpCount + numThumbnailsPerRow;
}
document.write('</table>');
// End -->
</script>
<!-- Script Size: 7.24 KB -->
