javascript - FancyBox 3 缩放按钮

Question

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

我正在使用 clickContent 打开链接，并且我认为既然我有 Zoom 功能，我可以通过按钮切换来调用它，而不是单击内容。

我用 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