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