How can I init panzoom globally?

Hello, how can I init panzoom globally? I’m trying to implement this plugin to work with flickity.js, so I’ve forked this plugin a bit. I have 2 different events on 2 different buttons, and it will work bad(e.g. animations doesn’t work, can’t destroy panzoom on zoomout event, etc) if I init panzoom twice, like I did for now:

proto.inZoom = function() { // This is forked line from flickity-fullscreen.js, line 64
  this._changeZoom( true );
  this.focus();

  const elem = document.querySelector('.is-selected')
  const panzoom = Panzoom(elem, {
    maxScale: 3,
    minScale: 1,
    panOnlyWhenZoomed: true,
    overflow: 'visible',
    contain: 'outside',
  })
  panzoom.pan(0, 0)
  panzoom.zoom(3, { animate: true})

  this.element.addEventListener('click', panzoom.zoomIn)
};

proto.outZoom = function() {
  this._changeZoom( false );

  const elem = document.querySelector('.is-selected')

  const panzoom = Panzoom(elem, {
    maxScale: 3,
    minScale: 1,
    panOnlyWhenZoomed: true,
    overflow: 'visible',
  })
  panzoom.pan(0, 0)

  this.element.addEventListener('click', panzoom.zoomOut)
};

Related issue: #480

[timmywil]

Panzoom seemed to already be available globally in your fiddle. However, since you are using UMD, I suggest adding Panzoom as one of your dependencies.

https://jsfiddle.net/timmywil/1jxgak02/9/

I went ahead and edited your zoom functions as well to fit what I think you’re going for.

[YOBA1112]

Thanks for the help! I managed to fix this problem by creating function which initializes panzoom. See this fiddle.