Fancybox / Panzoom toggle class when zoomed

[addedlovely]

Hello.

Is there an event I can bind to when an image has been zoomed in via panzoom. In my use case, I just want to toggle a CSS class on/off if when the zoom is activated.

Checking over the events that are fired with the below, there doesn't seem to be one that simply emits when the image is zoomed.

on: {
	"*": (fancybox, eventName) => {
	  console.log(`Fancybox eventName: ${eventName}`);
	},
},

Likewise there doesn't seem to be method on Panzoom to read the current zoom level, unless I'm missing that?

Thanks!

[fancyapps]

Hi,

Here is an example on how to listen to Panzoom events:

Fancybox.bind('[data-fancybox="gallery"]', {
  Images : {
    Panzoom : {
      on : {
        "*": (panzoom, eventName) => {
          console.log(`panzoom eventName: ${eventName}; current level: ${panzoom.scale}`);
        },
      }
    }
  },
});    

Demo - https://jsfiddle.net/8gorjed7/

panzoom.scale would be current zoom level where "1" would be initial level (e.g. scaled to fit). Use fullScale to get zoom level for the full size image.