Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Sliders and Thumbnails and Lightboxes

Featured Replies

I've just started work on a new project and am experimenting with different slider, thumbnail and lightbox options.

 

This is page I'd like you to consider: http://directgroupinternational.com/listing/slider-test/

 

On a large screen you can click the thumbnail to change the image or you the hover navigation on the main image. Clicking on the main image opens a lightbox.

 

On a touch screen hover you can swipe to change the image but as the screen gets smaller so will the thumbnails until you reach a point when they become too small to be of any real value.

 

So the idea is at 768px wide (an iPad in portrait) the thumbnails disappear and the images all display in full so you can scroll down (normal behaivior on a tablet/phone)

 

Is this a good UX?

 

Or would it be better to only have the slider and thumbnail or only have the full sized images and a scroll?

 

Or something else?

Well, that seems fine (and expected) to me; however, if this was to actually be used for a product listing as in your example and not just any old gallery, I'm not sure about displaying more than a single image on mobile devices/smaller screens. It seems like an unnecessary use of space. I know I'm usually only really interested in the main product image and description anyway, the other angles/etc are just there in case I'm unsure about something - though that could just be me.

 

Does that help? I'm not good at feedback, but you hadn't had any other replies yet...

  • Author

This isn't a B2C site. It's a B2B display cabinet for products sourced in China. Say you want to buy 100 VR headsets, this site will show the product and its packaging and have the description. The form is to get a quote for a the quantity you require.

 

So it's not a shop, it's more like a brochure with an enquiry form. The site owner knows that buyers always want to see a range of images. We are just looking at different ways to display those images.

Ah, I see. Hm... well, it's probably fine the way you've done it, but personally it still seems a bit like the images are taking priority over the product information. Maybe you could show the first image and have a toggle underneath that you can tap, and it expands the container to show the other images (one underneath the other still, as you currently have)?

Edited by rhubarblover

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.