FancyBox 3 Zoom Button

Question

I am using FancyBox 3 and wanted to have a zoom button in the buttons bar, but can't seem to make it work.

I am using clickContent to open a link, and I thought that since I have the Zoom function, I could call that somehow on a button toggle instead of clicking on the content.

I made a button with btnTpl, giving it a class of "fancybox-zoom".

I tried this (and a couple of other things, but none of these works)

afterLoad : function() {
                $(".fancybox-zoom").click(function(current,event) {
                    return current.type === 'image' ? 'zoom' : false;
                });
            },

Where/how should I call the click function or what am I doing wrong? :)

EDIT: Actually I found out that the function I need is scaleToActual but when I make it an onclick event on the button like this:

<button onclick="$.fancybox.scaleToActual()" data-fancybox-zoom class="fancybox-button fancybox-zoom"></button>

It drops the Uncaught TypeError: $.fancybox.scaleToActual is not a function error... any ideas about this method?

Any help would be appreciated.

Answer 1

It would be like this:

$( '[data-fancybox]' ).fancybox({
  onInit : function( instance ) {

    // Make zoom icon clickable
    instance.$refs.toolbar.find('.fancybox-zoom').on('click', function() {

      if ( instance.isScaledDown() ) {
        instance.scaleToActual();

      } else {
        instance.scaleToFit();
      }

    });
  }
});

Demo - https://codepen.io/anon/pen/boGPZx