search

kylewetton / image-compare-viewer

Compare before and after images, for grading and other retouching for instance. Vanilla JS, zero dependencies.
https://image-compare-viewer.netlify.com
MIT License
545 stars 32 forks source link

Cant make it work on html #9

Closed Umity closed 4 years ago

Umity commented 4 years ago

Hi, if i add JavaScript https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.js CSS https://unpkg.com/image-compare-viewer/dist/image-compare-viewer.min.css

then nothing happening, but if i add https://image-compare-viewer.netlify.app/js/1.0c7d4dc2.chunk.js from the website then everything image compare is working..

how can i make this work?

kylewetton commented 4 years ago

Hey @Umity, I'm unable to replicate this issue. Here's a CodePen using the two links you're having trouble with.

https://codepen.io/kylewetton/pen/ExVMLgw

Are you getting any errors in your console?

Umity commented 4 years ago

Oh thank you, i forgot to add id="rendered-js" only problem i am having with when i am comparing, the screen moves is not locked. how can i lock it because it is a bit unpleasant when comparing?

kylewetton commented 4 years ago

Do you mean on mobile?

Umity commented 4 years ago

Oh yes, mobile and more specifically on iOS devices.

kylewetton commented 4 years ago

Yep this is impossible unfortunately, this is the issue I'm referring to regarding the vertical option, as you can imagine dragging the slider on a mobile vertically just scrolls the whole page. There are CSS tricks to make this work, however as of yet there is no support for Safari on mobile for those CSS tricks.

Umity commented 4 years ago

Oh no.. need to find a solution. Do you suggest any work around? I know you don’t want dependency and thats why we are here (and yes your code is far more beautiful than other comp. sliders) but have heard small libs like hammerjs or something. How can we implement a workaround?

kylewetton commented 4 years ago

You're right, I've added body scroll locking, the dependency is only 2kb so no foul. Update to 1.4.0 and this should work, it also means you can use vertical mode.

Note that if you're already scrolling via inertia when you click on it, it won't lock the body. This is probably helpful if you're scrolling down the page (and passed the viewer), that touching it doesn't stop you in your tracks.

The dependency I used is https://github.com/willmcpo/body-scroll-lock