vanilla-js-wheel-zoom
Version:
Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)
141 lines (124 loc) • 5.02 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;
}
.summary {
border-radius: 5px;
background: #17a2b8;
opacity: 70%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
font-weight: bold;
margin: 5px;
padding: 3px 6px;
}
</style>
</head>
<body>
<div class="container py-3">
<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="row justify-content-center">
<div class="col-md-6 col-sm-12 mt-3">
<div class="ratio ratio-4x3 rounded bg-secondary overflow-hidden">
<div id="myViewport2" class="myViewport">
<div class="summary">Loading...</div>
<img id="myContent2" class="myContent" src="https://worka.github.io/files/wheel_zoom_example_2.jpg" alt="image"/>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mt-3">
<div class="ratio ratio-4x3 rounded bg-secondary overflow-hidden">
<div id="myViewport" class="myViewport">
<div class="summary">Loading...</div>
<img id="myContent" class="myContent" src="https://worka.github.io/files/wheel_zoom_example.jpg" alt="image"/>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mt-3">
<div class="ratio ratio-4x3 rounded bg-secondary overflow-hidden">
<div id="myViewport3" class="myViewport">
<div class="summary">Loading...</div>
<img id="myContent3" class="myContent" src="https://worka.github.io/files/wheel_zoom_example_3.jpg" alt="image"/>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 mt-3">
<div class="ratio ratio-4x3 rounded bg-secondary overflow-hidden">
<div id="myViewport4" class="myViewport">
<div class="summary">Loading...</div>
<img id="myContent4" class="myContent" src="https://worka.github.io/files/wheel_zoom_example_4.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 () {
function getState(wzoom) {
return {
top: wzoom.content.currentTop,
left: wzoom.content.currentLeft,
scale: wzoom.content.currentScale,
};
}
function getStore(index) {
if (window.sessionStorage) {
return JSON.parse(sessionStorage.getItem('image_' + index));
}
}
function setStore(index, state) {
if (window.sessionStorage) {
sessionStorage.setItem('image_' + index, JSON.stringify({
top: state.top,
left: state.left,
scale: state.scale,
}));
}
}
function summary(wzoom, state) {
wzoom.viewport.$element.querySelector('div').innerHTML =
'left: ' + state.left.toFixed(2) +
', top: ' + state.top.toFixed(2) +
', scale: ' + state.scale.toFixed(2);
}
document.querySelectorAll('.myContent').forEach(function (element, index) {
var state = getStore(index);
WZoom.create(element, {
smoothTimeDrag: 0,
prepare: function (instance) {
if (state) {
instance.transform(state.top, state.left, state.scale);
}
},
rescale: function (instance) {
setStore(index, getState(instance));
summary(instance, getState(instance));
},
onMove: function (event, instance) {
setStore(index, getState(instance));
summary(instance, getState(instance));
}
});
});
});
</script>
</body>
</html>