Estoy usando el panzoom de la biblioteca Panzoom y me gustaría poder acercar y alejar una imagen mientras hago clic en la imagen misma. Funciona. Pero sólo por primera vez. Quiero acercar una imagen en dos pasos (2 clics) y alejarla en 1 paso. Agregué registros de consola para verificar la escala. Cuando hago clic por cuarta vez, inmediatamente muestra acercar: 1.7 (primer paso) y alejar. Y no pasa nada.
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>Un amigo mío me ayudó y me dijo que debido a que estoy usando eventos de dos clics, se cancelan entre sí. Entonces debería tener solo un evento de clic como ese:
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()) } })