Beseku Gallery 0.1

A few weeks ago I (tentatively) released flickArray, a simple PHP class for retrieving image information from Flickr. While I love the idea of Flickr, I wanted to improve on the way the images were displayed on my site - this was the catalyst for creating both the flickArray class and a new user interface.

I’ve been experimenting with using javascript to add motion to a static XHTML interface for Cimex and the new gallery interface is an extension to that. The new gallery software consists of two parts; a back end - consisting of an updated and extended version of the original flickArray class together with a few wrapping PHP pages, and a front end ‘theme’ which uses XHTML/CSS to present the images and (if available) Javascript to enhance the interface and request additional images from Flickr without reloading the page or altering the documents semantic structure.

The Back End

While the original flickArray class contained a number of useful functions, I needed to add to it in order to achieve some of the results I wanted. These changes mainly involved modifying the existing methods to retrieve additional data. I also created ‘raw’ versions of all of the retrieval methods which return the information in pure XML form, a requirement for accessing the information through Flickr.

To make the retrieved information more usable, I also extended the flickArray class to add methods that returned the information in XHTML structures, (mainly lists) which can be accessed directly from a PHP/XHTML page.

The Front End

The interface was initially designed using XHTML/CSS to create a semantically structured page for displaying images. I loosely based the layout on Todd Dominey’s excellent Slideshow Pro, which I feel is a brilliantly designed interface for viewing large amounts of images. Client side scripting is then used to alter the initial page to allow more images to be viewed without reloading the page. It is important to build web applications that can be used with or without Javascript, and so I wanted the scripting to enhance the gallery rather than comprise it.

Script executed on page load determines the number of images to be displayed counting through the image links in the toolbar, and creates additional nodes in the ‘images’ definition list for each one. This method means that the page loaded initially doesn’t contain any superfluous or empty elements - the javascript adds them in only if the script is executed.

Once the elements have been generated and positioned, an onClick event is attached to each image link that will shift the relevant image into view and execute an AJAX request to retrieve the image, image title and image description from Flickr via the flickArray class.

Conclusions

I have been concerned over the use of AJAX in recent months, as I felt that many people would implement it because they could, rather than for a specific and beneficial reason. I initially did not intend to use AJAX on this project, but chose it because of the server requests it would save when used. Instead of reloading the page and thus rebuilding the flickArray object, only a single request is made to the server instead of three or four when a new image is selected. If you try using the system without javascript, it becomes much more tiresome to use because of the loading times involved.

The software still needs some improvements - I would like to enhance the interface further and the previous/next buttons are conspicuous by their absence. I also need to address how the system displays larger numbers of pictures, as currently the list of links simply wraps and looks confusing. Browser compatibility wise, there are some slight bugs in Opera that result in lost image descriptions.

Release 0.1

A number of people have expressed interest in the software to display images on their own sites. You can download the entire gallery software under the Creative Commons Attribution Non-Commercial licence. If you are using it, please link to this article so other people can get the software too. I would also like to hear of any improvements so they can be added to the main code base. Download Beseku gallery v0.1.