using AJAX to spiff up a gallery

Lightbox is nice and all, but sometimes I find it clunky, particularly in Firefox when I have a lot of other tabs open. However, I don't want to go the route of having an image load by itself in the browser, because it would be so much nicer to have it integrated into my layout. I could have a whole bunch of separate pages, one for each image, and do a full page load when a thumbnail is clicked, but that's kind of a hassle. Well, with a simple PHP script and some AJAX calls, I can have my image load within the gallery page without a page reload.

Things You'll Need

• Prototype for its Ajax.Updater, which will be used to update an element in the current page without reloading the page.
• You'll need PHP in order to write the script to parse URL parameters and display an image.

Image Displayer

If you try to load an image in the middle of an HTML page, your browser is going to lug along before displaying a whole bunch of crap that is the actual image source. That is, you won't see your pretty image. Instead, you need to load another HTML page that has the image in it. Instead of having a separate page for every image in your gallery, we're just going to have one boilerplate PHP script that will take parameters in the URL and display an image:

What this script is doing is checking to see if any of our desired parameters (e.g. width, alt) were passed in the URL, which is stored in PHP's $_GET superglobal. If they were, then the function calls to array_key_exists() will return TRUE, and a variable will be set for each of our attributes. The calls to htmlspecialchars() is a safety check to turn any code, such as malicious Javascript, into harmless ASCII entities (e.g. it replaces < and > with &lt; and &gt;). The calls to stripslashes() is to ensure any added \'s before quotes are removed before the text gets printed out.

After the data is gathered in this script, it is then printed out in appropriate HTML tags. The image is stuffed into an img tag, the description is printed out, etc. Now we can link to this script, which I named image_displayer.php, and pass in the appropriate values in the URL with this format: image_displayer.php?key_1=value_1&key_2=value_2 and so on with as many values as we want to define. In PHP, if a variable is not initialized to some value, if it is later printed, it just doesn't print anything at all, rather than giving an error.

Javascript

Make sure you've included the Prototype Javascript library. Then, you'll need to create some HTML element, probably a div, and give it a unique ID. E.g. <div id="gallery_photo"></div>--note that we're leaving it empty. Now, outside of that div, you can make the links to your images:

<a href="/wp-content/da/blobs1.jpg" title="Prisms" onclick="new Ajax.Updater('photo_display', '/wp-content/image_displayer.php?max_width=700&width=700&height=662&alt=Prisms&src=/wp-content/da/blobs1.jpg', {asynchronous:true, method:'get'}); return false;">
<img src="/wp-content/da/thumb/blobs1.jpg" alt="Prisms" style="width: 40px; height: 40px; border: none;"/>
</a>

To break it down, we include the image URL in the regular href section so that if Javascript is not enabled, the user will be taken to the image directly. The onclick section is where the magic happens. We're making a call to Ajax.Updater and telling it 1) the ID of the HTML element that we want to stick the result of our request, 2) the URL to our image_displayer.php to have our image displayed, and 3) that we want the request to happen asynchronously and we want to use the GET method as opposed to POST, which is typically used for form submissions.

And there you are. :) You can see this in action in my Graphic design section.