FancyBox 3缩放按钮

Question

我正在使用FancyBox 3，并希望在按钮栏中有一个缩放按钮，但似乎无法使其工作。

我使用clickContent来打开一个链接，我认为既然我有缩放功能，我可以通过按钮切换而不是点击内容。

我用btnTpl做了一个按钮，给它一类“fancybox-zoom”。

我想这（和一对夫妇的其他东西，但这些作品）

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

在哪里/我应该怎么称呼点击功能或者我究竟做错了什么？ :)

编辑：其实我发现我所需要的功能是scaleToActual但是当我做它的按钮onclick事件是这样的：

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

它植入Uncaught TypeError: $.fancybox.scaleToActual is not a function错误...有关这种方法的任何想法？

任何帮助，将不胜感激。

Answer 1

这将是这样的：

$('[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(); 
     } 

    }); 
    } 
}); 

演示 - https://codepen.io/anon/pen/boGPZx