Lightbox improvement - Drag navigation

Closes #381 (closed)

added 1 commit

• 14387dcc - Do opposite action to drag direction

Compare with previous version

added 1 commit

• 997bae94 - Enable drag navigation only when multi images

Compare with previous version

@feld , @hj please review this

I don't think we really need to support drag events, only touch ones. Nobody really drags carousels on desktop. I think horizontal scroll is used far more often that dragging.

We need drag for mobile, though.

@feld @hj, ok just want to confirm.

1. On desktop, horizontal scroll will navigate images but drag event
2. On mobile, drag event will work for navigation

it doesn't work without drag?

Drag is a native mobile UX feature because it has a touch screen. If I see photos or a gallery on a mobile device or tablet the instinct is to drag, not look for a button element.

i'm not talking about UX, i'm talking about what sort of events browser fires

Do you mean "what happens if the mobile browser can't send drag events" ?

no i mean "does browser send touch events, drag events or both?"

the answer is probably "touch events only, drag event after enormous delay and only if we don't react to touch event" btw, but i want a confirmation.

@hj , @feld can you please review the changes?

To say again,

1. On desktop, horizontal mouse scroll will navigate images, but drag/drop won't work.
2. On mobile, touch & drag will navigate gallery.

if you try dragging on desktop there's some weird side-effect on Chromium where the grabbed image moves with the cursor with gray edges depending on aspect ratio, there shouldn't be anything (which is how it works on firefox, which is good). Also the drag on mobile should use a way lower threshold, 100px is a lot especially when there's no feedback when you start dragging. I'd try something like 30-50px

Fixed

Now the dragging doesn't work on mobile

swiping works for me on firefox, however it's not intuitive that anything is going on, maybe sliding current picture would be a good improvement.

also background scrolls while you try to swipe making it even more confusing.

I tried it on my phone (firefox) and responsive design mode in both ff and chromium yesterday, haven't tried the newer version yet.

Doing animations for the images will be a more difficult thing considering there's just one image that changes instead of one moving away while other one comes in, I'd leave it for further improvements if deemed necessary.

Ok, it works with the newer version, one thing I'd add, check if Y movement is smaller than X or otherwise small enough, so it won't trigger the change when you do 35px on X and 80px on Y

Implemented checking Y movement, and fixed background scroll.

added 1 commit

• c19ea6b5 - Lightbox navigation by horizontal scroll

Compare with previous version

added 1 commit

• 43d1756a - Fix dragging in light box

Compare with previous version

added 1 commit

• f6ee2ad4 - Detect mobile browser for dragging

Compare with previous version

added 1 commit

• a0588e5a - Disable background scroll while lightbox visible

Compare with previous version

I don't think this is the approach we'd want.. isn't there a way to distinguish between mouse move events and touch events?

No, we need to distinguish the browser to enable dragging. On desktop we catch only scroll events while touch event in mobile browser.

IMO, isMobileBrowser will be useful service for others.

Detecting browser is very bad practice, detect features support instead.

Keep in mind you can do touch on devices/browsers that aren't mobile as well. We don't care which browser the swipe was done on, we care if it was done using a touch or a mouse.

added 1 commit

• 85dd121e - Improve swipe gallery image on mobile

Compare with previous version

closed