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