Ajaxified: Brent Danley Photography

Brent Danley Photography has been ajaxified!

**The new url is photography.brentdanley.com.**

The “pages” in the gallery have previously been generated by a single PHP file. This was done by passing to itself a page parameter using the get method. This worked well except that the entire page, including images and linked scripts, had to be reloaded every time the user clicked to go to a “new” page. It was certainly better than creating a separate document for each set of thumbnails, though, even if the header and footer were reused. It made little difference to the user who doesn’t know, and probably doesn’t care, how the page is created. An asynchronous transfer would be an improvement the user would notice.

What I did today was eliminate the necessity of the page reload.

Now, using Prototype‘s Ajax.Updater method, a PHP script is passed a page value corresponding the the link on which the user clicked. The PHP script retrieves the thumbnail and image information from the Flickr API using phpFlickr and returns an XHTML string to the calling method on the client. The return string from the PHP script is automatically inserted into the client element specified in the Updater’s url parameter.

function updateGallery(page){	
	new Ajax.Updater('gallery', 'ajax_gallery.php', 
		{method: 'get', 
		parameters: 'page=' + page});

I also performed some CSS jujitsu to animate the thumbnails when the user passes the mouse pointer over them. It was as simple as increasing the size of the images and reducing (to -1px) the size of the margins.

#gallery  a:hover .thumb{
	border:6px double #003e7c;

Go have a look.

It still takes some time to load each new set of thumbnails. Besides caching, I’m not sure what could be done to remedy that. I’d also like for the navigation links to be better looking buttons or tabs or an accordion. And the return from the Updater call should probably return an XML document. Another day, perhaps.

Let me know what you think.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.