1

I'm setting up a custom zoom button and want to implement it. For some reason my defaults aren't applying to the popup.

I've tried including the out of the box structure, but to no avail.

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

    });
  }
});

});});

Expected results is an understanding of how to implement the new zoom as well as other buttons.

user3135730
  • 320
  • 1
  • 3
  • 8

1 Answers1

0

The first step would be to learn to debug the code. Hit F12 to open developer tools and check Console tab. You will see this JS error message:

Uncaught TypeError: Cannot set property 'zoom' of undefined

And the reason is that you have used tpl instead of btnTpl property, so, replace that and it will work fine - https://codepen.io/anon/pen/OYaxeb?editors=1010

btw, you could also use $.extend() to tweak defaults:

$.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'
  ]
});
Janis
  • 8,593
  • 1
  • 21
  • 27
  • Familiar with F12 and went through this. I believe we're using different versions. I was actually using that syntax first though opposite of the way you explained it. Try adding `console.log($.fancybox.defaults); $( '.fancybox' ).fancybox({` to see results of object. – user3135730 May 31 '19 at 06:15
  • What is the point of your comment if 1) you did not tell what version are you using; 2) you did not give any link to your page/demo where your issue could be inspected; 3) the demo I created for you works perfectly fine. – Janis May 31 '19 at 09:05