Пример: zoom 300%
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> <!-- 1. Add latest jQuery and fancyBox files -->
<style type="text/css">
.fancybox-button.zoom{
color: #FFFF00;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.4.1/jquery.fancybox.min.js"></script>
<script>
$(document).ready(function(){
$.fancybox.defaults.btnTpl.z = '<button data-fancybox-z class="fancybox-button" title="zoom 300%">300%</button>';
$('[data-fancybox="gallery"]').fancybox({ buttons : ['z', 'close'], afterShow : function(instance, current ) {
$('[data-fancybox-z]').toggleClass("zoom", current.ratio == 3)
}});
$(document).on('click.fb', '[data-fancybox-z]', function( e ) {
var instance = $.fancybox.getInstance();
var current = instance.current;
current.ratio = current.ratio != 3 ? 3 : 1/3;
current.width = current.width * current.ratio;
current.height = current.height * current.ratio;
instance[ current.ratio == 3 ? "scaleToActual" : "scaleToFit"]();
$(this).toggleClass("zoom", current.ratio == 3);
});
});
</script>
</head>
<body> <p>zoom</p>
<!-- 2. Create links -->
<a data-fancybox="gallery" href="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"><img width="300px" src="http://www.newerapr.com/uploads/3/9/5/3/39535555/idf16-conexant_orig.png"></a>
<a data-fancybox="gallery" href="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"><img width="300px" src="https://www.writingwhimsy.com/wp-content/uploads/2013/11/fancybox_banner.png"></a>
<!-- 3. Have fun! -->
</body>
</html>