Zoom, just one look…

… 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.

Read More

Another Lightbox hack

NOTICE
CONTENTS NO LONGER APPLICABLE

The content discussed in this post is no longer valid; as I’m now using a different “lightbox” implementation.
More here

When opening an image via lightbox, closing an image can get very counter intuitive. The close button is at the bottom right, which sucks if you have an image that’s larger than the viewing area. Trying to move that close button on the upper right can be too tedious as it requires a lot of modification on the DOM script and CSS. The easier thing would be to simply allow users to close the image when they click on it, after all, what else does one person usually do after viewing an image but close it right?

A hack for this is easy to do, however this usually broke Lightbox‘s “group” mode – instead of moving to the previous/next image, it prioritizes the close function assigned to the image container instead of the group mode’s prev/next overlays – resulting in the image closing anywhere you click.

The trick was to find another place where I could inject similar code, while making sure that it only does it when it’s viewing a single image. Read More

Lightboxing and Flickr

NOTICE
CONTENTS NO LONGER APPLICABLE

The content discussed in this post is no longer valid; as I’m now using a different “lightbox” implementation.
More here

JC made me check out his installation of a cool WordPress plugin that does lightboxing. I decided to apply the same stuff in my blog – and modify it a bit to be able to link to the image’s Flickr page somewhat dynamically.

Results

If you’re not interested in the details, then just spot the difference between these two lightbox-enabled links (I just hope it does work as I intended it to).

Here’s an image which I linked to Flickr

Here’s an image which I linked to the Gallery within my domian

LINK REMOVED (as the old gallery doesn’t exist anymore)

If you noticed the difference, and are interested in how I did that – read on… Read More