Source of “index.html”
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- Emacs settings: -*- mode: Fundamental; tab-width: 4; -*-
////////////////////////////////////////////////////////////////////////////
// //
// Andrew's Album Application: index.html //
// //
// Copyright (c) 2004-2005, Andrew Birrell //
// //
// See photos.php or the "Help" screen for a summary //
// //
////////////////////////////////////////////////////////////////////////////
-->
<html>
<head>
<meta name="viewport" content="width=640">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Photo Album</title>
<link href="photos.css" rel=stylesheet>
<script type="text/javascript" src="/support/crypto.js"></script>
<script type="text/javascript" src="/support/common.js"></script>
<script type="text/javascript" src="photos.js"></script>
</head>
<body onload="init()">
<!--
// Top button bar and commentary box
-->
<table class=top id=topStuff><tr>
<td class=btns id=parentBtns>
<span id=parents>Top</span>
</td>
<td class=btns id=prevnextBtns>
<span id=auto>Play</span><span
id=pause>Pause</span><span
id=resume>Resume</span>
<span id=stop>Stop</span>
<span id=prev>Previous</span>
<span id=next>Next</span>
<span id=skip>Skip</span>
</td>
</tr></table>
<!--
// Main table
-->
<table class=top id=mainTable><tr><td class=main id=main>
<!--
// "About" dialog
-->
<div class=dlog id=about>
<div class=dlogHeader id=aboutHeader onmousedown=
"return dragStart(event, 'about', 'aboutHeader', 'dragging')">
About Andrew's Album Application
</div>
<div class=dlogBody>
<input class=close type=submit value=Close onclick="return closeDlogs()">
This is a simple web-based application that implements a photograph
album.
The photographs are stored as images in a folder hierarchy on a server.
The application lets you navigate that hierarchy and view the images.
It's intended to be very easy to use, but if you need some help hover
the mouse over one of the links for a couple of seconds, and you should
see a brief hint about what the link does.
<p>
The application relies on Javascript running in your web browser, and
needs a reasonably modern browser (for example, Internet Explorer 6,
Safari 1.3.1, Firefox 1.5, or Opera 8.51).
It won't work on earlier browsers.
See also the separate
<a href="/." onclick="return openDlog('details')"
title="Open the 'Technical Details' window">technical details page</a>.
<p>
The application was written by me,
<a href="http://birrell.org/andrew/me/">Andrew Birrell</a>,
mostly because I wanted to learn how to use Javascript, dynamic HTML
and the XMLHTTP object.
</div>
</div>
<!--
// "Technical Details" dialog
-->
<div class=dlog id=details>
<div class=dlogHeader id=detailsHeader onmousedown=
"return dragStart(event, 'details', 'detailsHeader', 'dragging')">
Technical Details
</div>
<div class=dlogBody>
<input class=close type=submit value=Close onclick="return closeDlogs()">
The server side of the application consists of a
<a href="lister.php?file=photos.php">PHP script</a>
plus its
<a href="lister.php?file=subroutines.txt">subroutines</a>
and
<a href="lister.php?file=settings.txt">settings</a>.
The script responds to requests from the client side
by returning XML descriptions of the images and folders.
The server-side script is also responsible for creating and maintaining
a cache of scaled images, and a database of image and folder titles.
The server-side script doesn't do any HTML,
and it has no opinion on how you are going to navigate and view the images.
<p>
After changing the set of images and folders on the server, you can
pre-load the server-side cache by shift-clicking on the "Play" button.
<p>
The client side consists of
<a href="lister.php?file=index.html">this HTML</a>,
plus its associated
<a href="lister.php?file=photos.css">stylesheet</a>
and
<a href="lister.php?file=photos.js">Javascript</a>.
The HTML provides the structure of the displayed page.
The stylesheet provides graphical details such as color, position,
and size.
The Javascript implements the logic of the user interface.
It interprets user gestures, and modifies the web page accordingly.
When the user action needs information from the server
(e.g. a folder listing), the Javascript uses the "XMLHTTP" object
to initiate an asynchronous request to the server-side script.
When the XML response arrives, the Javascript interprets it and updates
the web page.
<p>
The Javascript also uses the XMLHTTP object to perform read-ahead
for the "Next" button, so that most uses of "Next" will display the
result instantly, hiding the client-server latency.
Finally, it caches recent responses from the server, further hiding latency.
<p>
The HTML is
<a href="http://validator.w3.org/check?uri=referer"
title="Try the HTML against the W3C validator">strict HTML 4.01</a>,
with a DTD declaration so that browsers run in "standards-compliant" mode,
not "quirks" mode.
<p>
For those whose browsers can't deal with modern technology, there's a
<a href="noscript.php"
title="run the PHP script for non-Javascript access">very
basic version</a>
that doesn't use any Javascript.
<p>
All of this is copyright.
If you want to copy it for your own use, please
<a href="http://birrell.org/andrew/me/"
title="Go to my personal home page">ask</a>
first.
</div>
</div>
<!--
// "Bookmarking" dialog
-->
<div class=dlog id=link>
<div class=dlogHeader id=linkHeader onmousedown=
"return dragStart(event, 'link', 'linkHeader', 'dragging')">
Bookmarking a Folder or Image
</div>
<div class=dlogBody>
<input class=close type=submit value=Close onclick="return closeDlogs()">
Because of
<a href="" onclick="return openDlog('details')"
title="Open the 'Technical Details' window">the way</a>
this application was built, your web browser never
sees a URL for a particular folder or image.
This can be a problem if you want to bookmark a folder or image,
or if you want to send its URL in email.
<p>
The application does provide a URL for any folder or image.
You can bookmark the appropriate URL or copy it to the clipboard by
right-clicking on one of the links on this page and choosing from the
contextual menu that appears.
This applies to the parent folder links at the top-left of the page,
and to each of the links in a folder listing page.
It doesn't apply to the navigation links ("Play", "Stop", "Previous",
etc.).
<p>
Additionally, you can right-click on the "Bookmark" link itself
to get a URL for the folder or image that's currently being displayed.
<p>
If you're using a Macintosh with a button-challenged mouse you'll
need to control-click instead of right-clicking.
Or buy a better mouse.
</div>
</div>
<!--
// "Edit" dialog
-->
<div class=dlog id=editForm>
<div class=dlogHeader id=editH
onmousedown="return dragStart(event, 'editForm', 'editH', 'dragging')">
Edit the Title
</div>
<div class=dlogBody>
<div class=dlogStatus id=writing>
Writing ...
</div>
<form method=GET action="./" onsubmit="return editSave(false)">
<table id=editInner>
<tr>
<td class=formPrompt>User:</td>
<td class=formInput><input type=text id=editUser size=20></td>
</tr><tr>
<td class=formPrompt>Password:</td>
<td class=formInput><input type=password id=editPwd size=20></td>
</tr><tr>
<td class=formPrompt>Title:</td>
<td class=formInput><input type=text id=editTitle size=50></td>
</tr><tr>
<td></td>
<td class=formInput>
<input type=submit value="Save & Close">
<input type=submit value="Save & Next"
onclick="return editSave(true)">
<input type=submit value="Next" onclick="return doNext()">
<input type=submit value=Cancel onclick="return closeDlogs()">
</td>
</tr>
</table>
</form>
</div>
</div>
<!--
// "Reading" progress screen (with its fake "progress" bar)
-->
<div class=dlog id=reading>
Reading ...
<div id=readingProgress><div id=readingWidget> </div></div>
</div>
<!--
// Image scale screen
-->
<div class=dlog id=scaling></div>
<!--
// Image pre-fetch, permanently invisible
-->
<div class=dlog>
<img id=prefetch src="" alt="">
</div>
<!--
// Main content area
-->
<div id=dropZone>
<div class=failure id=failureText>
If your web browser thinks it has finished loading this page
and you are still seeing this message, it's most likely because
your web browser isn't executing my script correctly.
This might be because the browser is too old, or it might be
because you have disabled scripting.
<p>
The script has been tested with Internet Explorer 6.0,
Safari 1.3.1, Firefox 1.5, and Opera 8.51.
Earlier versions of those browsers will not work (that includes
any version of Internet Explorer on a Macintosh).
<p>
If you want, you can use a plain old
<a href="noscript.php">static HTML version</a>
of the photograph album instead.
</div>
</div>
<!--
// End of main table
-->
</td></tr></table>
<!--
// Bottom button bar
-->
<div id=bottomWrapper>
<table class=top id=bottomStuff><tr>
<td class=btns id=privBtns>
<span id=edit>Edit</span>
<span id=bookmark>
<a id=linkAnchor href="./"
onclick="return openDlog('link')"
title="Right-click to bookmark or copy a URL for this page">Bookmark</a>
</span>
<a href="./"
onclick="return openDlog('about')"
title="Learn about this program">Help</a></td>
<td class=btns id=title>
<div class=stars id=stars onmouseout="showStarLevel()"
><img
id=star1 src="whiteStar.gif" alt="1" width=15 height=15
onmouseover="starOver(this)"
onclick="starClick(this)"><img
id=star2 src="whiteStar.gif" alt="1" width=15 height=15
onmouseover="starOver(this)"
onclick="starClick(this)"><img
id=star3 src="whiteStar.gif" alt="1" width=15 height=15
onmouseover="starOver(this)"
onclick="starClick(this)"><img
id=star4 src="whiteStar.gif" alt="1" width=15 height=15
onmouseover="starOver(this)"
onclick="starClick(this)"><img
id=star5 src="whiteStar.gif" alt="1" width=15 height=15
onmouseover="starOver(this)"
onclick="starClick(this)"></div>
<span id=titleText>Andrew's Album Application</span>
</td>
<td class=btns id=commentary> <br> </td>
</tr></table>
</div>
<script type="text/javascript"> <!--
if (document.getElementById) {
var failure = document.getElementById("failureText");
failure.style.display = "none";
computeMainSize();
}
// -->
</script>
</body>
</html>
End of listing