search

cotton123236 / zoomist

Zoomist is a library built with TypeScript that allows you to create zoom elements on website quickly and easily.
https://zoomist.vercel.app/
MIT License
112 stars 23 forks source link

Can it be used inside a div element? Does it have to be only for scaling images? #33

Closed 9yues closed 5 months ago

9yues commented 1 year ago

Can it be used inside a div element? Does it have to be only for scaling images?

cotton123236 commented 1 year ago

Hey @9yues , It's possible to be used on any element!, make sure you're using zoomist version 2.x and you can zooming anything you want in .zoomist-image (checkout v2 on github).

ukizet commented 12 months ago

@cotton123236 why can't I click on the button inside the zoomist-image container? I tried clicking on the button inside the zoomist-wrapper container and it works, but then I can't zoom into button. What can I do to be able to both zoom in and click on the button?

Codesandbox example

cotton123236 commented 5 months ago

Hey @ukizet ,

Starting from v2.1.0, you can click the button or other elements in .zoomist-image!

toremato commented 1 month ago

Hi, @cotton123236! Cannot click on anything inside zoomist wrapper @ v2.1.1

bbceg commented 1 week ago

Hi @cotton123236 ,

I'm struggling with this a little too. I have a table which fills the zoomable area and every cell needs to be clickable. When I single tap a table cell the click event isn't fired on touch screen devices.

On a desktop the click event is fired after a user finishes dragging. I managed to work around this by using the drag event and only firing a click when not dragging. Unfortunately this didn't help me with touch screen devices.

Is there another way I should be going about handling clicks events?

bbceg commented 1 week ago

In case it helps anyone I managed to solve this by using the touchstart and touchend events on the elements I wanted to be tappable. If anyone would like that code, or if there's a better way, please do let me know.