… and then my heart went boom!

Remember that song? Well, it doesn’t really have anything to do with this post apart from the reference of the word “zoom.” (and personally, my heart did go “boom” when I saw the awesomeness of what I’m about to discuss).

I’ve implemented a new “lightboxing” system in my site using the FancyZoom script.

For the uninitiated, a the term lightbox has its etymology rooted in photography, but sufficed to say, in “internet” lingo, it’s a script which is commonly used for toggling image magnification without having to leave the current page. I’ve been using it in my site almost every time I use a thumbnail (which will be demonstrated in a while). For a quick sample though, click right here.

Oh and if you’re reading this via RSS reader, I’d suggest you visit the actual page for this entry, else none of this will work.

Enough of the introductions, most of you know what it is, and for those who do you know that the earlier lightbox system I had was a modified version of the popular Lightbox JS by Lokesh Dhakar. I’ve switched over to FancyZoom by Cabel Maxfield Sasser – a Panic employee. I noticed the script while viewing the screenshots of their products and thought this was even more elegant (and simple) than what I had in place.

So basically what it does is instead of the darkening of the background and showing the bigger picture, it actually zooms the picture out from the source (text or thumbnail) and into full view (and back) – and that’s just awesome. It also automatically parses all hrefs that point to images in the page… unlike the older method which required a rel tag to flag something as a lightbox element. This means that upon implementing the script, it immediately was reflected in all pages of my site which had such links (including all previously “lightboxed” elements). Quite literally plug and play.

It was even easier to implement the regex hack I did before. But that didn’t mean I didn’t have my share of issues.

Concerns: It’s not a bug, but…

One major concern I had was that it was very picky with whitespace, so while it would interpret code like this just fine:

<a href="IMAGE_FULLSIZE_URL"><src="IMAGE_THUMBNAIL_URL" /></a>

But would have certain issues when done this way:

<a href="IMAGE_FULLSIZE_URL">
<src="IMAGE_THUMBNAIL_URL" />
</a>

To demonstrate, here are some images of my cool new shades, spread apart, and lightboxed using the first method:

Notice how the zoom starts exactly where they are, and start at the minimized size… meaning it works perfectly.

But let’s try it the second way:

Notice that the one on the right is still zooming from the left! There’s also a nuance that you’ll probably not see with a thumbnail this size, but it doesn’t zoom from the right source dimensions as well! Consider the identical thumbnails below:

Did you see where the left was zooming from – also the width and height it started out from? The lower bottom portion and much smaller than the thumbnail. The way it should be zooming like is the one on the right (which uses the first method)

So there, it’s not really a bug, but because of that nuance, I had to edit all my entries since July 2006; the first time I started using lightboxes. I’m sure there are other entries before that, but they’re not a priority 😉

Best of all, it even works on the iPhone!