Blog » Lightboxes

With my portfolio site more or less finished, I’m looking at the thumbnails that link to larger images and wondering if I shouldn’t do something with them. Specifically, make them into lightboxes.

I hate lightboxes. I hate how many variants there are. I hate trying to figure out how each one works. Yet even blinded by my own hate I can see the point of them. Once you make sense of the current site’s lightbox, it’s easy to page through multiple galleries of images. And they’re occasionally better than the blights on humanity they replaced (JavaScript window.open popups and the dreaded target=”_blank”).

But my skin crawls at the thought of using them. I’d set up a table of pros and cons to using lightboxes, but that doesn’t really encompass the scope of the problem. Instead, let’s do it Dwarf Fortress style.

I’m going to write from the perspective of an imaginary user trying to look at a bunch of screenshots on a website. If something is easy to use and works the way I expect, I get a happy thought. If I have to puzzle out how to make the interface do what I want, I get an angry thought.

On top, a good webmaster links a thumbnail image directly to a larger version. No JavaScript, no new windows. Below that, a bad webmaster may have used any random lightbox script to show a larger version on the page when you click the thumbnail.

Normal image link

  • Click!
  • That’s a pretty image!
  • How can I make it bigger?
  • Oh, I’ll (click, double-tap, pinch to zoom)
  • How can I save it to my desktop?
  • Oh, I’ll (drag to desktop, right-click and save, tap and hold)
  • How do I get back to the other images?
  • Oh, I’ll use the back button!
  • Next image!

Lightbox link

  • Click!
  • Something’s spinning. Is the image loading?
  • A white box is expanding. Where’s my image?
  • That’s a pretty image!
  • How can I make it bigger?
  • It doesn’t get bigger when I click it!
  • It doesn’t get bigger when I double-tap it!
  • It doesn’t get bigger when I pinch to zoom! In fact, the whole page distorts weirdly now!
  • I wish it was bigger!
  • How can I save it to my desktop?
  • I can’t save it by clicking and dragging it to my desktop! It closes when I click on it!
  • I can’t save it by right-clicking! Some weird message appears and tells me to stop stealing content!
  • I can’t save it by tapping and holding! All I get is some transparent file because the actual image is being used as a background!
  • I wish I could save it!
  • How do I get back to the other images?
  • I can’t get back to the other images by using the back button!
  • Is there a little (X) in the corner that I can click? Is it at the top right, top left, bottom right, or bottom left? Is it hidden until I mouse over the image?
  • Can I close the image by clicking it? Sometimes I can, sometimes I can’t!
  • Can I close the image by clicking the background? Sometimes I can, sometimes I can’t!
  • Whew, one of those (X) buttons or image clicks or background clicks closed the image.
  • Next image!