search

AviKKi / hover-preview

A vanilla js library to show preview images on hover
7 stars 17 forks source link

Does not work well in mobile devices #10 (images hover preview) hacktoberfest #16

Open yhau1989 opened 3 years ago

yhau1989 commented 3 years ago

suggested that pornhub.com has this type of UX for thumbnail preview

yhau1989 commented 3 years ago

Hey @AviKKi we can use Intersection_Observer_API ?? Could generate a new branch and a new pull request?

AviKKi commented 3 years ago

Hey @yhau1989 this doesn't look very good, opera mini, UC browser and iOS 12.1 will be left out which is major portion of mobile users. I've had the look at the code of pornhub.com their approach is very simple with a great UX, so I'm heading up with that.

Their method for mobile - on TouchStart 

=> get initial coordinates 
=> check if these coordinates are on a img element
=> start img's preview

due to this simple approach there is no way to stop the preview once it's started, small loop hole w.r.t. the simplicity and UX we get. Stopping the preview using Intersection_Observer_API sounds nice to me.

PS: Later I may add options for multiple preview triggers, but for now since https://github.com/AviKKi/hover-preview/issues/18 is not yet done. I"m sticking with this approach.