Gallery Lightbox

Question

What do you think of letting one image open a gallery instead of a single image where one can show next and previous (regular lightbox)?

I'm thinking something like this:

...or something like this:

It will be initiated via a click on a image thumbnail inside a box or by clicking the link "more images" directly beneath that same image (they both trigger the same action):

What i'm after is for the user to be able to see more images and in an easier way be able to browse through the images without single-view that the lightbox give.

So the specs are:

1. Should be able to use the scroll wheel on their mouse.

2. Should be to use forward/backward/up/down keys on their keyboard. All the keys should work so that people that more often use up/down to scroll forward/backward can use that if they want.

3. Should be able to use touch and slide the image back and forth (as well as trigger next by tapping a image). Should also be able to simulate slide with a mouse by simple clicking, holding and dragging the slide back and forward.

4. Larger screens or screens in landscape should see more then one image, only portrait screens should see one image at a time.

5. The images should not be "clickable", upon click the slide should just go to the next image

6. ESC-key triggers close, click on overlay triggers close, pushing a key 2x times less then 300ms apart triggers close as well (user obviosly want "out").

Edit

Context: The user is at a page viewing a short list of hotel options (3-5 options) in a package deal for a destination (ie Phuket, Thailand). The user want to view more images for a property and triggers "More images" via clicking "More images" or the thumbnail associated with each property.

Q: No large view or higher resolution images?

A: No, images for certain types (ie hotels, resorts etc) often are of low quality and not really available in high resolution. The solution i'm building will not be static so changes can always be made in the future.

Q: More focus with one image/better with one image/view?

A: Yes/No. For certain things it's better to view more images at once. Hotel properties being one where users usually want to be able to see and move quickly through a batch of images and where the gallery as a whole carry more weight then any individual image. For general photography it is usually the other way around (in my opinion).

Update 26 march 2014:

Demo test: http://m.jade.se/misc/slideBox/slideBox.html (please run in an A-grade browser)

Works: Keys (up/down/right/left), Mousewheel, Click on image (for next), Close (ESC-key, button etc), Touch swipe (since it's just a scrolling layer)

Don't work: Proper image position when reaching last image, animations, cross browser compatibility (probably)

Answer 1

It's an interesting idea but I'd point out two facts (not really problems) :

• There's less place for the current/selected image
• The current/selected image is not centered in your approach (maybe it's just a quick mockup)

Anyway, I'd suggest two ways of doing this.

Center the in-focus image, make it bigger. Previous/next images are smaller, placed behind the current one and why not decreasing opacity or whatever of those. The controls you described are still okay with this approach.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Otherwise, you can put the other images below the current one. Something more classical actually.

^{download bmml source}

A nice example of this one :

P.S.: certain parts of this screenshot have been pixelated for copyright reasons.