javascriptjqueryzoomingfancybox-3

FancyBox 3 Zoom Button


I am using FancyBox 3 and wanted to have a zoom button in the buttons bar, but can't seem to make it work.

I am using clickContent to open a link, and I thought that since I have the Zoom function, I could call that somehow on a button toggle instead of clicking on the content.

I made a button with btnTpl, giving it a class of "fancybox-zoom".

I tried this (and a couple of other things, but none of these works)

afterLoad : function() {
                $(".fancybox-zoom").click(function(current,event) {
                    return current.type === 'image' ? 'zoom' : false;
                });
            },

Where/how should I call the click function or what am I doing wrong? :)

EDIT: Actually I found out that the function I need is scaleToActual but when I make it an onclick event on the button like this:

<button onclick="$.fancybox.scaleToActual()" data-fancybox-zoom class="fancybox-button fancybox-zoom"></button>

It drops the Uncaught TypeError: $.fancybox.scaleToActual is not a function error... any ideas about this method?

Any help would be appreciated.


Solution

  • It would be like this:

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

    Demo - https://codepen.io/anon/pen/boGPZx