@DownPW Technically, it should be possible with the addition of the below
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
Meaning your code block becomes
function fancybox() {
if (top.location.pathname !== '/login') {
$(document).ready(function() {
$('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
$('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]').addClass("noanimate");
});
});
Fancybox.bind(
'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"], a[href*=".svg"]', {
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
}
);
}
}
Note, that you just need to add/remove the elements in the toolbar you do not need. Obviously, zoomIn and zoomOut are the ones you are specifically interested in. However, if Fancybox detects that the image has already been zoomed as far as possible, then this will not work. You’d need an external library such as zoom.js to add this functionality, or perhaps simpler
https://www.jacklmoore.com/zoom/
A good example of how you’d make these two independent libraries work together is below
https://codepen.io/ezra_siton/pen/VgrjKw
It’s worth nothing that this specific code is based on Fancybox 3, so may need to be refactored to work with the latest version 5.
