Fancybox по умолчанию проблема с настроенным зумом - PullRequest
Новая
       20

Fancybox по умолчанию проблема с настроенным зумом

1 голос
/ 31 мая 2019

Я настраиваю пользовательскую кнопку масштабирования и хочу ее реализовать.По какой-то причине мои настройки по умолчанию не применяются к всплывающему окну.

Я пытался включить готовую структуру, но безрезультатно. 

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

    });
  }
});

});});

Ожидаемые результаты - это понимание того, как реализовать новый зум, а также другие кнопки.

1 Ответ

0 голосов
/ 31 мая 2019

Первым шагом будет научиться отлаживать код.Нажмите 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'
  ]
});
...