自定义缩放的 Fancybox 默认问题

Question

我正在设置一个自定义缩放按钮并希望实现它。出于某种原因，我的默认设置不适用于弹出窗口。

我尝试过包含开箱即用的结构，但无济于事。

jQuery(function($) {
$(document).ready(function() {              
    // Create template for zoom button
$.fancybox.defaults.tpl.zoom = '<button class="fancybox-button fancybox-zoom"><div class="zoom"><span class="zoom-inner"></span></div></button>';

// Choose what buttons to display by default
$.fancybox.defaults.buttons = [
  'fullScreen',
  'thumbs',
  'zoom',
  'close'
];

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

    });
  }
});

});});

预期结果是了解如何实现新的缩放以及其他按钮。

Answer 1

第一步是学习调试代码。按 F12 打开开发人员工具并检查控制台选项卡。你会看到这个 JS 错误信息：

Uncaught TypeError: Cannot set property 'zoom' of undefined

原因是您使用了tpl 而不是btnTpl 属性，所以，替换它，它会正常工作 - https://codepen.io/anon/pen/OYaxeb?editors=1010

顺便说一句，你也可以使用$.extend() 来调整默认值：

$.extend(true, $.fancybox.defaults, {
  btnTpl : {
    // Create template for zoom button
    zoom : '<button class="fancybox-button fancybox-zoom"><div class="zoom"><span class="zoom-inner"></span></div></button>'
  },

  // Choose what buttons to display by default
  buttons : [
    'fullScreen',
    'thumbs',
    'zoom',
    'close'
  ]
});