Henry Tapia

Under Design, JavaScript, Technical, Web Standards

We interrupt the travelogues to talk about some geeky stuff that’s been going on around these parts.

I’ve recently been using grids of thumbnails to link to Flickr photos as they relate to blog posts (e.g. my previous post). One thing I’ve wanted to do is find a way to show these images without sending viewers over to Flickr and away from my site for fear that they might get lost (if they are navigationally challenged) or simply be pulled into something more interesting and not return. This would be a good excuse to add a little Script.aculo.us and AJAX sweetness to my blog posts.

What I needed was:

• To be able to embed images into blog posts and just link to my Flickr account rather than hosting the photos myself;
• A list of thumbnails for when there are several images to show;
• To avoid encouraging users to go off-site without resorting to pop-ups and such;
• A JavaScript solution, ideally, but I wanted to avoid adding more libraries (e.g. Mootools) and if possible re-use the ones my already rather bloated Wordpress theme already uses (in this case Prototype).

Solution:

Here’s an example of the end product. Click on the thumbnails…

Plaza de las Tres Culturas

Monument at Plaza de las Tres Culturas

Statue of JPII

Basilica de Guadalupe

Obsidian carving

Temple of the Moon at Teotihuacán

At the Temple of the Sun at Teotihuacán

You can hit escape, click the close button or anywhere outside the box to close the overlay. Mouse over the image and click on previous or next to view other images (when part of a series). Even use keyboard shortcuts (P and N). NICE.

For this I had to use my many and varied skills (such as searching on Google, copying and pasting code snippets, checking my Facebook) to come up with the best solution. The end result was shamefully easy and involved:

• Floating the thumbnails and captions in a grid (using a DL element) was a nice reusable way of displaying the thumbnails regardless of container and text size. TJK Design has a good scalable technique for this.
• Modal windows are becoming a good solution for contextual user interactions when used appropriately. They are becoming fairly familiar to users, especially those who use Windows Vista (where they have the annoying tendency to come up every 10 seconds or so), and are quite appropriate for viewing larger images in the context of a gallery.
• Using AJAX to load the images (as I wanted to load an external image rather than load all the images within the page or launch another window).

I found a few great contenders but I settled on the very excellent Lightbox 2 by Lokesh Dhakar, as it did exactly what I needed, looked good and used prototype and script.aculo.us. If I wanted overlays in general for other interactions or content, I would have gone with one of the scripts previously mentioned, or the very cool ModalBox, and if I was using the Mootools JavaScript framework (which would have been ideal, I really like Mootools) I would have used MOOdalBox.

I was pleased to find I didn’t need to really hack any JavaScript out at all in order to get this going, I just had to make a few changes here and there to tie it in with my current Wordpress scheme.

This type of interaction is something you will see more often in sites rich in functionality. I’m currently starting to use these type of techniques at work in order to build user friendly standards-based e-commerce user interfaces. The down side of the ease of using these types of libraries is that it’s very possible there will be a flurry of overuse leading to massive user annoyance. Use wisely…