Lightbox — Quick, Pretty Screenshot Previews

Every uISV has a screenshot page and, if you’re sane, a shot of your program above the fold on your front page.  These are generally teeny-tiny thumbnails which exist more to demonstrate the fact that there is a real purchasable product than anything else.  Of course, customers actually want to be able to read the text on your GUI, so you link that thumbnail to an image file… and bad stuff happens.

For the non-technical B2C market, “bad stuff” generally means “Prospective customer cannot find their way out of the image”.  Yes, I know, I know, they have a back button.  They may not KNOW they have a back button, though.  My screenshots, for the longest time, had 80%+ bounce rates until I figured this out.  So I’ve been using the _blank thing to pop the screenshot up in a new window, which is a decent compromise but it distracts unduly from the sales pitch.  They have to close that window to get back to reading, and I’d rather they have a visual reminder of what exactly they were doing so they don’t get distracted, switch to their email, and go away.

Luckily, there is this nice little Javascript widget called Lightbox (introduced to me by the indispensable Nick Hebb, king of flowchart software).  Add two lines of code to your web page, tag screen shots with rel=”lightbox”, and you get a shiny Javascript preview effect which is quite similar to e-junkie’s Fat Free Cart.  It grays out the rest of the page but keeps it visible, and directs your attention directly on the screenshot — a single click anywhere dismisses it, taking you back to the page.  (There is a Lightbox2 which has more sophisticated behavior which is, for my customers, a usability nightmare.  I passed.)  You can take a quick gander at the home page for Bingo Card Creator — try playing with the main screen shot to see Lightbox and the purchasing page to use the Fat Free Cart.

No Responses to “Lightbox — Quick, Pretty Screenshot Previews”

  1. John Zorn April 14, 2007 at 11:31 am #

    I clicked on the main screen shot and was redirected to
    then I clicked Back clicked Reload and tried again, then it worked, then I left
    the site, and entered again, again redirected to

    Happy hunting,


  2. Patrick April 14, 2007 at 11:35 am #

    I’m going to take a wild stab in the dark and say that was probably caused by you hitting it before the page was totally loaded. Thats quirky behavior, though, and I will try to see what I need to do to correct it. Thanks for the report.

  3. Matthew April 14, 2007 at 5:24 pm #

    I prefer my own script personally (

  4. Oliver April 14, 2007 at 6:34 pm #

    Patrick, The background doesn’t grey-out on your site when I click a screen shot. It shows the pic alright, but the fully visible background adds lots of clutter and confusion IMO. I’m using FF1.5, WinXP. Cheers, Oliver.

  5. Patrick April 15, 2007 at 3:21 am #

    Thanks for the heads up. I have no clue exactly WHAT was causing that, but after 15 minutes of playing around it turns out that if you move lightbox.css into the main CSS file everything clears up.

  6. David Foskey April 16, 2007 at 12:07 pm #

    Patrick, using IE6, W2K, slow connection (kids have blown my quota) took several (= too many) seconds to load, dark grey background (ie your screen not visible). Used x top right to return to your screen rather than back button. Definitely thumbs down.

    Cheers, David

  7. Magnus J April 17, 2007 at 5:59 am #

    I just started to use Lightbox2 before I read your post.
    Exactly why is it a “a usability nightmare.” ?

  8. Patrick April 17, 2007 at 7:16 am #

    Because my users are not very sophisticated and it is not obvious to them how to dismiss the interstitial. Many of them will try clicking somewhere, anywhere. That works for Lightbox 1 but not for 2.


  1. Simple Enhancement To Lightbox « MicroISV on a Shoestring - April 17, 2007

    […] Enhancement To Lightbox I posted recently about how to use Lightbox to make your web site prettier and more useable, and someone pointed out […]

  2. Bingo Cards On Rails « MicroISV on a Shoestring - September 29, 2007

    […] who so much as glance at the page click on it.  When they click on it, the screenshot expands in a Lightbox […]

  3. Leveraging OSS As A Software Developer « MicroISV on a Shoestring - June 26, 2008

    […] my bag.  As it turns out, Lightbox Gone Wild (a variant of the Lightbox project which I’ve previously used to business-enhancing effect) took this from several days of work to about five minutes of […]