0

我正在使用 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错误......关于这种方法的任何想法？

任何帮助，将不胜感激。

4

1 回答 1

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

于 2017-09-13T13:35:25.470 回答