One of the cool things about trying new open source software is having the opportunity to tinker with it when things don’t work quite the way you like, or quite the way that you would have done them. This week, I installed a WordPress blog and spent a couple hours playing with various features and community-written plugins. One of my instant favorites is a plugin called LightBox, which displays large versions of your images in a DHTML overlay when a visitor with a compatible browser clicks on a link to an image. You can see it in use in other posts on this page, though I have not had time to update my blog archives for using it just yet.
Colin, I’m already bored! Show me something cool or shut up already!… Ok, fine, go here.
A while after discovering LightBox and getting it installed, I discovered LiteBox, a derivative based on the moo.fx library and prototype.lite. I soon switched over to this, to save on download time.
But then I found a few things to nitpick. For one, if you link to a really big image, say, a 1280×1024 screenshot, the lightbox dutifully expands to 1280×1024 pixels, but this shoves the all-important “Close” button way off the bottom right edge of your screen. Seeing pretty pictures pop up over the blog is cool. Scrolling around looking for the button to get rid of them is not.
Another annoyance for me, was that I post a fair number of pictures from my cameraphone via Flickr’s email 2 blog feature, via Verizon’s PIX messaging to email addresses. This works quite well, but only puts a smallish 240px preview into my blog. I attempted to edit Flickr’s blog layout to access the 500px version that I know exists, but for whatever reasons, this does not work for me. Flickr tops out at providing a 240px thumbnail. Not bad, but I just don’t like having you, my fair reader, leave my site to view a bigger version of the pictures I post (assuming you even do). It feels like a discontinuity.
So a bit last night, and more this afternoon, I sat down and hammered out my own release of the LiteBox plugin. I call it “SmartBox”, and it pretty handily resolves these issues. You can see it in use here on my blog. Try clicking on a picture like one of the fountaincam snapshots, just to see the lightbox effect as originally intended.
Now, take a look at any picture posted from Flickr, such as my Grandma’s Strawberry Jam. If you mouseover the thumbnail, you’ll see the link heading off to flickr-land to view the full size image there. But try clicking on it, and up pops a 500px larger version, instead of directing you to Flickr’s website. Very nice. The link, if you check again, has been dynamically rewritten to point to a bigger copy of the image that Flickr for some reason won’t just post automatically for me.
Finally, take a look at these two examples: If you follow this link: Waterfall near Medford, OR (no lightbox) you’ll see a tall, narrow image that is almost certainly taller than your browser window. With the old LiteBox, that would have popped up full size when clicking on a LiteBox-enabled link. That would be annoying. So would following this link: Crater Lake Edge (no lightbox), a short but very wide image. Note: your browser may resize the image for you: hover your mouse over it and look for a zooming cursor (Firefox) or an “expand” button (IE6) to see that the image is actually pretty large.
Instead, try these new SmartBox-enabled links, which automatically scale the image size to fit:
Waterfall
For extra fun, try resizing your browser window (maximize it, for example), and click those again. Fancy.
Nice, yes?
If you have a WordPress blog and are interested in using this on your own site, you are more than welcome to. I have done my best to package a WordPress plugin. The most I can say at the moment (with zero other testers) is that it works for me, with WordPress 2.1.3. Pay attention to the readme file for installation and set up instructions.
You can obtain the plugin by downloading this ZIP package and extracting it into your WordPress plugins directory: smartbox-0.3.zip
Or, by checking out the code from subversion:
svn co http://svn.mccambridge.org/smartbox