Rui CarmoThis is a minor update on some cosmetic/dynamic aspects of this site that may have gone unnoticed to those of you living inside your feed reader.
Quick Look
A while back, when Coda was launched, I was awed by the amazingly cool JavaScript that Cabel Sasser whipped up for its front page, most notably the zooming image effect, which is like a leaner, more intuitive lightbox without the background fade (which I happen to dislike).
I waited for them to release their JavaScript library in one form or another (and even dropped Cabel an e-mail a while back), but during my vacation I decided to look for alternatives – preferably ones based on jQuery.
And I eventually got wind of Jonah Fox’s zoombox, with which I’ve been playing around for a couple of weeks now.
The end result, which leverages jQuery’s easing and dimensions plugins to do a simple fade and adjust for the browser scroll bars, can be seen by clicking on this image1:
Although Jonah’s code allowed for dynamic loading (and placing a spinner atop the small image while the larger one loads), I’m cheating and preloading the large image to create an instant “quick look”-like effect (like the one that we’ll be, erm… enjoying in the Finder once Leopard comes out).
I also wrote a simple Yaki markup plugin for it, so all I need to do is type:
<plugin name=“quicklook” src=“small.jpg” alt=“zoom.jpg”>
…while editing a post, and Yaki renders it as a straight-up image-plus-link combo, which is re-formatted by jQuery for browsing and degrades perfectly for RSS.
Surprisingly, it also works OK when the images have different proportions (here’s the same thumbnail with a different zoomed image):
…so right now I’m using it throughout the site, even though it has a few minor issues:
- There is a slight “jump” downwards when using Safari 2.x, which I’m ascribing to a bug (it doesn’t happen in 3.0 or any other browser).
- It can look funky if the Flash header decides to update while zooming (another bug, since Flash has never dealt well with z-ordering across browsers).
- Preloading can be a bit of a problem when you have too many images, or large zoomed images (I’m trying to limit the size of zoomed images to 64K, which works OK over 3G).
- There is no depth cue other than the zooming motion – i.e., no drop shadow, which would make it look a lot more polished.
But it degrades well, works OK with any window size and with multiple images on the same page (try resizing your browser window and clicking on either image), and has proven pretty intuitive so far – there’s no need for close widgets or “next” buttons when handling multiple images.
All it really needs now are cosmetic fixes, and once I’ve done those and a little more testing, I’ll most likely add it to Yaki as a standard plugin.
Nobody Expects The Ajax Inquisition
In the meantime, I also tried looking for a “live search” mechanism that used jQuery and looked good. Failing to find something that suited my particular tastes I eventually started hacking my own, but dropped it instantly the moment I saw Ajax Auto Suggest, which looks and feels a lot like Inquisitor.
Although it is not really designed for search boxes and has a few issues with keyboard handling (which I’m trying to work around), it is pretty damn useful already, and is heartily recommended.
To try it out, start typing something in this site’s search box – that will do a title search across all four thousand and something pages in this Wiki.
Again, it’s a work in progress, but it works OK for now. Let’s see how long it will take for me to iron out the little kinks in the integration.
1 Obviously, if you’re reading the RSS feed, you need to visit the site. Also, the image is my current wallpaper, unashamedly pilfered from Michael Heilemann’s Halo 3 screenshots