Making a photo gallery: Domino, Semantic XHTML and Ajax

I need a new gallery for my Tangosite rework soon, so I spent some time lately thinking how to achieve this. I had a few looks on the internet as well, and I stumbled upon this site. Very nice and with the animations it gives a natural feeling. The JavaScript code behind it was a little too heavy for me: 100K in total... Since I was doing some very similar things at work, I decided to have a go at it myself.

Storing the binary files in Domino

I use the PhotoShop Automate > Web photo gallery function to reduce the images and to make the thumbnails in one go. This leaves me with images and thumbnails having the same filename, but in different directories.

So I will attach each set to a separate document with form 'FileSet'. The name of the document (field:Subject) acts as a folder name, and consists of the name of the gallery combined with '-lores' for the images and '-thumbs' for the thumbnails.

Then the form has also a rich text field to hold the files and a button to upload them via the Notes client without me having to look for the smarticon. The button formula:

@Command([EditGotoField]; "Body"); @Command([EditInsertFileAttachment])

Gallery XHTML

A photo gallery is a list of small images, each with a link to open the bigger image and a description. Translated into semantic XHTML, this gives:

<ul>
    <li><a href="/domino/inc/sample-lores/$file/IMG13.jpg"><img src="/domino/inc/sample-thumbs/$file/IMG13.jpg" alt="IMG13.jpg" /></a></li>
    <li><a href="/domino/inc/sample-lores/$file/IMG0.jpg"><img src="/domino/inc/sample-thumbs/$file/IMG0.jpg" alt="IMG0.jpg" /></a></li>
    <li><a href="/domino/inc/sample-lores/$file/IMG1.jpg"><img src="/domino/inc/sample-thumbs/$file/IMG1.jpg" alt="IMG1.jpg" /></a></li>
    <li><a href="/domino/inc/sample-lores/$file/IMG2.jpg"><img src="/domino/inc/sample-thumbs/$file/IMG2.jpg" alt="IMG2.jpg" /></a></li>
</ul>

Adding the CSS

The CSS makes them all flow in the available space by setting 'float:left'. All elements are set to 'display:block' to avoid extra whitespace and a small margin is used to separate the thumbnails. All the links have to be the same height and width to create a grid effect. When you click on a thumbnail, you can see that it works without JavaScript. But with JavaScript it will even be a lot more fun...

.gallery{margin:0;padding:0}
.gallery li{list-style:none;float:left;margin:0 5px 5px 0}
.gallery img,.gallery a{display:block}
.gallery a{height:100px;width:100px;text-align:center}

The gallery JavaScript

I am going to describe the JavaScript in a next post. This time I have a lot to explain. Feel free to download mme-01.js and have a sneak preview. The total amount of JavaScript code is 2.5K. Here's the code in action:

Clicking on the large image takes you to the next. Clicking on the dark curtain closes the lightbox.