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'
  ]
});

Fancybox默认问题与自定义缩放

1 个答案: