FancyBox 3 확대/축소 버튼

Question

FancyBox 3을 사용 중이며 버튼 막대에 확대/축소 버튼이 있기를 원하지만 작동하지 않는 것처럼 보입니다.

나는 링크를 열기 위해 clickContent를 사용하고 있는데, 나는 줌 기능을 가지고 있기 때문에 내용을 클릭하는 대신 버튼 토글을 어떻게 든 호출 할 수 있다고 생각했다.

btnTpl로 버튼을 만들어 "fancybox-zoom"클래스를 제공했습니다.

나는이 (다른 것들과 몇하지만,이 작품의 아무도) 시도

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

/I가 클릭 함수를 호출하거나하는 방법을 내가 무슨 일을하지 않는 것입니까? :)

편집

:는 사실 내가 필요로하는 기능이 scaleToActual 것을 발견하지만이 같은 버튼에 onclick 이벤트 할 때 :

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

는 그것은 Uncaught TypeError: $.fancybox.scaleToActual is not a function 오류 방울 ... 이 방법에 대한 아이디어가 있습니까?

도움을 주시면 감사하겠습니다.

Answer 1

그것은 다음과 같이 될 것이다 :

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

    }); 
    } 
}); 

데모 - https://codepen.io/anon/pen/boGPZx