ImageViewer-omeka-module/view/common/block-layout/imageViewer.phtml

<?php if ($zoom == true) {
	//$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
	//																								'ImageViewer'));
	$this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js',
																									'ImageViewer'));
	$this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css',
																									'ImageViewer'));
} ?>

<div class="wheelzoom-wrap" style="position:relative;">

	<?php
		if ($title !== false && $title !== "") {
			$title = sprintf('<p id="wheelzoom-title">%s</p>', $title);
		} else {
			$title = false;
		}
	?>

	<style>
		.archive-img {
			width: <?= $width ?>px;
			<!-- width: 50%; -->
		}
		<?php if ($zoom == true) { ?>
		#<?= $id ?> {
			cursor:crosshair;
		}
		<?php } ?>
	</style>

	<div class="archive-img">
		<img id="<?= $id ?>"
				 src="<?= $image ?>"
		/>
	</div>

<?php if ($zoom == true) { ?>
	<script>
		$(document).ready(function(){
		  $('#<?= $id ?>')
		    .wrap('<span class="zoom" style="display:inline-block; cursor:grab"></span>')
		    .css('display', 'block')
		    .parent()
		    .zoom({'duration': 200, 'magnify': 2, on:'grab'});
		});
	</script>
<?php } ?>

	<?php if ($zoom == true) { ?>
		<script>
		/*
		$(document).ready(function(){
			wheelzoom(document.querySelector('#<?= $id ?>'));
		});
				*/
		</script>

	<?php } ?>

</div>