vanilla-js-wheel-zoom
Version:
Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
77 lines (65 loc) • 2.65 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;
}
</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">
<b data-tip></b>
</div>
<div class="ratio ratio-4x3 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 tip = document.querySelector('[data-tip]');
var minScaleReached = true;
var maxScaleReached = false;
WZoom.create('#myContent', {
rescale: function (instance) {
var minScale = instance.content.minScale;
var currentScale = instance.content.currentScale;
var maxScale = instance.content.maxScale;
if (currentScale === minScale) {
minScaleReached = true;
tip.innerHTML = 'Min scale reached: ' + minScale.toFixed(2);
} else if (currentScale === maxScale) {
maxScaleReached = true;
tip.innerHTML = 'Max scale reached: ' + maxScale.toFixed(2);
} else {
minScaleReached = false;
maxScaleReached = false;
tip.innerHTML = 'Current scale: ' + currentScale.toFixed(2);
}
}
});
});
</script>
</body>
</html>