I was wondering if there is any data exists describing users' feelings towards a gallery-linked image lightbox being larger than the user's viewport--specifically vertically larger--such that the user would have to scroll if they wanted to see more of the image.

The discrepancy came when I realized I didn't know if users were clicking my images to be able to scroll through them simply or to view a larger, higher quality image. All the content of the lightbox is visible in a smaller form on the page so there's no incentive to click an image to get new content.

3 Answers 3


A major issue I have come across related to touch devices.

On a poorly designed lightbox that doesn't limit image size to viewport, images can naturally exceed the native height and width. However, when you try to scroll, the lightbox stays fixed while the background of the page moves instead, making it impossible to see the photo.

Naturally, a properly developed lightbox wouldn't do this but it is still an issue that should be known.

Aside from this, in a/b experiments that I have done personally, a scrolling lightbox style popup with a introductory block of text has not had any variance in bounce rate than a non-scrolling but still readable sibling.

Unfortunately, I can't share the concrete numbers from said experiments at the moment.

  • I'm careful not to do a fixed lightbox with fixed dimensions as I have experienced this issue myself--mostly on my netbook. Thanks for the advice though. May 31, 2012 at 20:12

Could you please provide a bit more details about what you want your users to do? Based on the second paragraph when the images fit users don't click on them to view bigger format. Perhaps the users see what they need and therefore they don't need to click. It seems that if you make images exceed the viewport it might make it harder for the users to navigate through the images and if that is their main goal just to preview the image you'll make overall experience worse for the user.

  • I was asking the question generally as I work on sites professionally, but my girl friend has a blog Nattosoup on which she will often be dumping many images vertically. She presumes people are clicking the images for more detail but doesn't want to lose the ability of users to flick through images with the arrow keys as provided by lightbox. She was considering fitting the lightbox to the width of the view port in stead of fitting to height and width. May 31, 2012 at 20:08

What if when someone clicks the thumbnail image on the page, the lightbox would open containing an image that's sized to fit in whatever width x height of the current browser window? Then there could be a link to "view full size image" within the lightbox if the user wants the full hi-res version.

This would eliminate the problem of the lightbox exceeding the viewport, and it would also allow you to track whether your users are looking for the full-res images based on how many clicks the "view full size image" link gets.

EDIT: here's a visual example of what I'm thinking in use within 37Signals' Basecamp product:

User: "That thumbnail looks interesting, I'll click to view it larger." User sees a thumbnail image of interest...

User clicks image. The "view full size in another window" link would take the user to the raw image in a new window. user clicks thumbnail image of interest.

  • I had considered this but it somehow feels confusing, like the user is navigating too deeply, but, as much as I hate opening new windows, I may have a magnifying glass which opens the original size image in a new window from the lightbox rather than going from modal to a page. May 31, 2012 at 20:11
  • I added some visuals, I think we're on the same page... just wanted to clarify.
    – Tim
    Jun 6, 2012 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.