2

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:

Horizontal scrolling gallery

...or something like this:

Vertical scrolling gallery

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):

enter image description here

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)

  • This can't really be answered without giving us the context. What is the content of the site and purpose of this functionality? It doesn't sound like a problem in principle, though. – user31143 Mar 24 '14 at 13:04
  • The context is: 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. – Tommie Mar 24 '14 at 13:11
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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

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

mockup

download bmml source

A nice example of this one :

enter image description here

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

  • The "problem" is that no image is that important by itself and the user(s) usually want to view these sort of images as rapidly as possible. Another caveat is that the images will have a max width of 640px since the kind of image and the sources very seldomly can offer good images above that size (and again -- these images need to display as quickly as possible so loading large images is a no-go). I've looked at more ordinary solutions but they are either bloated or aren't that great for viewing a 15+ array of images QUICKLY. – Tommie Mar 26 '14 at 16:44
  • Edit: Check the added demo-link supplied in original post. – Tommie Mar 26 '14 at 17:24
  • @Tommie great prototype ! I don't see any usability problems and I think it's okay doing it this way. It perfectly fits your goals. Maybe you could try to "focus" (slide to the next image and align it to the center of the screen) on the next image on scroll rather than using the default scrollbar behavior. – Gabin Mar 27 '14 at 3:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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