search

anvaka / panzoom

Universal pan and zoom library (DOM, SVG, Custom)
https://anvaka.github.io/panzoom/demo/attach-via-script.html
MIT License
1.82k stars 293 forks source link

Adding zoom in/zoom out and reset buttons #162

Open jonathonberlin opened 4 years ago

jonathonberlin commented 4 years ago

Hi there,

Love this library. I'd like to combine this with a Zoom in/Zoom out and Reset button.

Do you know of any examples of this type of functionality?

I found buttons here that I was able to implement here: https://stackoverflow.com/questions/47635341/zooming-in-out-an-image-by-clicking-zoom-buttons-javascript

This is built on a different library: dragscroll. This library doesn't appear to have the mobile functionality I'm looking for.

Thank you!

Jonathon

jonathonberlin commented 4 years ago

I found this: https://jsfiddle.net/1esrkvmz/

And this: https://github.com/anvaka/panzoom/issues/69

So I'm good. Haha!

kevgibs commented 4 years ago

How do I get that JS Fiddle example https://jsfiddle.net/1esrkvmz/ working with zoomAbs?

When I try to chain .zoomAbs like this

var newArea = panzoom(area, {
  zoomSpeed: 0.2,
  maxZoom: 4,
  minZoom: 0.1,
}).zoomAbs(
  x, // initial x position
  y, // initial y position
  1  // initial zoom
);

I get the error 'newArea is not defined', but without .zoomAbs it works fine.

kevgibs commented 4 years ago

Scratch that, digging around on #69 I found this

newArea.zoomAbs(x, y, 1);