vanilla-js-wheel-zoom
Version:
Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
92 lines (72 loc) • 2.92 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">
<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;
}
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 my-3">
<button data-rotate class="btn btn-info">Rotate</button>
</div>
<div class="ratio ratio-1x1 rounded bg-secondary overflow-hidden">
<div id="myViewport">
<img id="myContent" src="https://worka.github.io/files/wheel_zoom_example.jpg" alt="image"/>
</div>
</div>
</div>
</div>
</div>
<script src="../dist/wheel-zoom.min.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var image = document.getElementById('myContent');
var rotateButton = document.querySelector('[data-rotate]');
WZoom.create('#myContent', {
zoomOnDblClick: true
});
var degreeRotation = 0;
function changeTransformRotateProperty(element, value) {
element.style.transform = element.style.transform.replace(/(^|\s)rotate\(\d+deg\)($|\s)/i, '') + ' rotate(' + value + 'deg)';
}
function rotateImage() {
var animationDuration = 0.2;
image.style.transition = 'transform ' + animationDuration + 's';
changeTransformRotateProperty(image, degreeRotation);
if (degreeRotation > 270 && animationDuration) {
setTimeout(function () {
changeTransformRotateProperty(image, 0);
}, animationDuration * 1000);
}
}
var observer = new MutationObserver(rotateImage);
observer.observe(image, { attributes: true, attributeFilter: [ 'style' ] });
rotateButton.addEventListener('click', function () {
degreeRotation += 90;
rotateImage();
});
});
</script>
</body>
</html>