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

64 lines
1.3 KiB
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>