Handling images larger than viewport in carousel-based gallery

Question

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:

1. 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.
2. 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:

1. 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?
2. 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.

Answer 1

There are many solutions out there. The best thing to do would be to put your thumbnail list on top in a very elegant manner. As a first example look at this image slider:

http://www.tn3gallery.com/

When you hover over the image you get another menu that will take you to the list of images to. Also in your case I would think about moving the thumbnails to the top instead of the bottom.

Another nice slider is:

http://codecanyon.net/item/estro-jquery-ken-burns-swipe-effect-slider/full_screen_preview/235111

Also in this one i would suggest to move the bottom menu on top maybe align it to the right.

As an overview of this problem, I really think that if your major functionality is to get high resolution images to the user, the best option to show a carousel is to place it on top.

I hope this helps.

Answer 2

Re-scale the images so they fit in the viewport (most lightbox galleries and carousels support this option, normally by default) and give an extra option to see the high-quality image in a new window/tab.