I'm using Panzoom library panzoom and would like to be able to zoom in and zoom out an image while clicking the image itself. It works. But only for the first time. I want to zoom in an image in two steps (2 clicks) and zoom out in 1 step. I added console logs to check the scale. When I click for the fourth time it immediately shows zoom in: 1.7 (first step) and zoom out. And nothing happens.
let img = document.querySelector('img')
let panzoom = {}
panzoom = new Panzoom(img.parentElement, {
minScale: 1,
maxScale: 2.5,
step: 0.5,
// contain: "outside",
// panzoomMouseMove: 0,
panOnlyWhenZoomed: 1,
cursor: 'zoom-in',
});
img.addEventListener('click', () => {
img.style.pointer = 'zoom-out';
panzoom.zoomIn({ animate: true })
console.log("Zoom in: ", panzoom.getScale())
if (panzoom.getScale() === 2.5) {
img.style.cursor = 'zoom-out';
img.addEventListener('click', () => {
panzoom.zoomOut({ step: 1 });
img.style.cursor = 'zoom-in';
console.log("Zoom out: ", panzoom.getScale())
});
}
})html, body {
height: 100%;
width: 100%;
}
.offerBox_image {
max-width: 429px;
}
.offerBox_image img {
width: 100%;
height: auto;
margin: 0;
padding: 0;
}<script src="https://unpkg.com/@panzoom/panzoom@4.5.0/dist/panzoom.min.js"></script>
<div class="offerBox_image">
<img
data-id="1"
class="img"
src="https://source.unsplash.com/random/1100x1100"
alt=""
/>
</div>A friend of mine helped me and told that because I'm using two click events they cancel each other. So I should have to have only one click event like that:
img.addEventListener('click', () => {
img.style.pointer = 'zoom-out';
panzoom.zoomIn({ animate: true, step: 0.4 })
console.log("Zoom in: ", panzoom.getScale())
if (panzoom.getScale() === 2.5) {
img.style.cursor = 'zoom-out';
panzoom.zoomOut({ step: 1 });
img.style.cursor = 'zoom-in';
console.log("Zoom out: ", panzoom.getScale())
}
})