FancyBox 3 缩放按钮

Question

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

我正在使用 clickContent 打开一个 link，我认为既然我有缩放功能，我可以以某种方式在按钮切换上调用它而不是单击内容。

我用 btnTpl 制作了一个按钮，给它一个 class 的 "fancybox-zoom"。

我试过这个（还有一些其他的东西，但是 none 这些作品）

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

Where/how 我应该调用点击功能还是我做错了什么？ :)

编辑： 实际上我发现我需要的功能是 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

FancyBox 3 缩放按钮

FancyBox 3 Zoom Button

javascript

jquery

zooming

fancybox-3