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

62 lines
1.3 KiB
PHTML
Raw Normal View History

2021-04-17 22:18:36 +02:00
<?php if ($zoom == true) {
2021-04-19 13:57:44 +02:00
//$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',
2021-04-17 22:18:36 +02:00
'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>
2021-04-19 14:24:34 +02:00
#<?= $id ?> {
width: <?= $width ?>%;
2021-04-17 22:18:36 +02:00
}
<?php if ($zoom == true) { ?>
#<?= $id ?> {
cursor:crosshair;
}
<?php } ?>
2021-04-17 22:18:36 +02:00
</style>
2021-04-18 12:12:26 +02:00
<div class="archive-img">
<img id="<?= $id ?>"
src="<?= $image ?>"
/>
</div>
2021-04-17 22:18:36 +02:00
2021-04-19 13:57:44 +02:00
<?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 } ?>
2021-04-17 22:18:36 +02:00
<?php if ($zoom == true) { ?>
<script>
2021-04-19 14:24:34 +02:00
/*
$(document).ready(function(){
wheelzoom(document.querySelector('#<?= $id ?>'));
});
*/
2021-04-17 22:18:36 +02:00
</script>
<?php } ?>
</div>