vanilla-js-wheel-zoom
Version:
Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
135 lines (113 loc) • 4.82 kB
HTML
<html lang="en">
<head>
<title>worka/vanilla-js-wheel-zoom</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
#myViewport {
cursor: grab;
display: flex;
align-items: center;
justify-content: center;
}
#myContent img {
width: auto;
height: auto;
margin: auto;
}
#myContent div {
position: absolute;
font-size: 80px;
}
button {
width: 140px;
}
</style>
</head>
<body>
<div class="container py-3">
<div class="row justify-content-center">
<div class="col-12 col-lg-8">
<h1>vanilla-js-wheel-zoom</h1>
<p class="lead mb-4" style="word-wrap:break-word">
<a href="https://github.com/worka/vanilla-js-wheel-zoom">
https://github.com/worka/vanilla-js-wheel-zoom
</a>
</p>
<div class="d-flex justify-content-between my-3">
<button data-zoom-down class="btn btn-info">Zoom Down</button>
<input data-zoom-range type="range" class="flex-fill mx-3"/>
<button data-zoom-up class="btn btn-info ml-auto">Zoom Up</button>
</div>
<div class="ratio ratio-4x3 rounded bg-secondary overflow-hidden">
<div id="myViewport">
<div id="myContent">
<div class="border border-primary rounded-circle p-5 bg-primary" style="left:1500px;top:700px">Bridge</div>
<img src="https://worka.github.io/files/wheel_zoom_example_3.jpg" alt="image"/>
</div>
</div>
</div>
<div class="d-flex my-3">Move your mouse over the image and scroll to zoom in and out.</div>
</div>
</div>
</div>
<script src="../dist/wheel-zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var imageElement = document.getElementById('myContent').querySelector('img');
if (imageElement.complete) {
init();
} else {
imageElement.onload = init;
}
function init() {
var rangeElement = document.querySelector('[data-zoom-range]');
var wzoom = WZoom.create('#myContent', {
type: 'html',
width: imageElement.naturalWidth,
height: imageElement.naturalHeight,
onGrab: function () {
document.getElementById('myViewport').style.cursor = 'grabbing';
},
onDrop: function () {
document.getElementById('myViewport').style.cursor = 'grab';
},
prepare: function (instance) {
rangeElement.defaultValue = 0;
rangeElement.max = Math.round(Math.log(instance.content.maxScale / instance.content.minScale) / Math.log(instance.options.speed));
},
rescale: function (instance) {
rangeElement.value = Math.round(Math.log(instance.content.currentScale / instance.content.minScale) / Math.log(instance.options.speed));
}
});
document.querySelector('[data-zoom-up]').addEventListener('click', function () {
wzoom.zoomUp();
});
document.querySelector('[data-zoom-down]').addEventListener('click', function () {
wzoom.zoomDown();
});
window.addEventListener('resize', function () {
wzoom.prepare();
});
rangeElement.addEventListener('input', function () {
var newZoom = Number(rangeElement.value);
if (newZoom === 0) {
wzoom.maxZoomDown();
} else if (newZoom === rangeElement.max) {
wzoom.maxZoomUp();
} else {
var oldZoom = Math.round(Math.log(wzoom.content.currentScale / wzoom.content.minScale) / Math.log(wzoom.options.speed));
if (newZoom > oldZoom) {
wzoom.zoomUp();
} else {
wzoom.zoomDown();
}
}
});
}
});
</script>
</body>
</html>