I'm trying to figure out the best way to design an image gallery embedded in a lightbox. The gallery has thumbnail versions of each image in a carousel, and clicking a thumbnail brings that image into a medium-sized view above the carousel. The dimensions of the medium-sized image are constrained to be less than those of the viewport. Clicking that medium-sized image then expands the image to a large-sized version.
That large image is often larger than the viewport. This entails two problems:
- The carousel is pushed below the viewport. When this happens the viewer could plausibly become confused about how to continue iterating back and forth in the carousel, since they can't see it.
- The user is forced to vertically scroll their viewport to see the full large-sized image, interrupting their navigation of the carousel.
I can think of two options to partially solve these problems:
- Move the carousel above the medium/large-sized image, instead of its current position below the medium/large-sized image. This avoids problem 1 above. However this seems unconventional, and so might strike users as clunky. Are there any examples of this kind of design being used elsewhere?
- When the user clicks the medium-sized image, open the large-sized image in new tab. This avoids problem 1, and partly solves problem 2. However, the new tab would show only that large image (it would be the same as clicking 'View image' in a browser), which might also seem clunky. It also forces the user to switch between tabs -- arguably worse than scrolling within the same tab.
Since it might not be clear what I'm talking about, I've included a diagram below to illustrate the situation. In that diagram the viewport is outlined in red and the lightbox containing the carousel-based gallery is outlined in blue. Note how the height of the version of the lightbox at right exceeds the height of the viewport.
Any ideas on how this problem could best be solved? Can others point to examples of how a similar display problem has been elegantly handled? While considering a solution, please keep in mind that the thumbnail-carousel and medium-sized image adjacent to the carousel are important elements to preserve.