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.

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 technical details page.

The application was written by me, Andrew Birrell, mostly because I wanted to learn how to use Javascript, dynamic HTML and the XMLHTTP object.

The server side of the application is a PHP script, which 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.

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.

The client side consists of this HTML, plus its associated stylesheet and Javascript. 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.

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.

The HTML is strict HTML 4.01, with a DTD declaration so that browsers run in "standards-compliant" mode, not "quirks" mode.

For those whose browsers can't deal with modern technology, there's a very basic version that doesn't use any Javascript.

All of this is copyright. If you want to copy it for your own use, please ask first.

Because of the way 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.

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.).

Additionally, you can right-click on the "Bookmark" link itself to get a URL for the folder or image that's currently being displayed.

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.

User:
Password:
Title: