$(document).ready(function () { const zoomInBtn = document.querySelector('.zoom-in-btn'); const zoomOutBtn = document.querySelector('.zoom-out-btn'); const imgToZoom = document.querySelector('.page.product-details-page .gallery .picture .customdotmage-main'); imgToZoom.addEventListener("mouseenter", function (event) { this.style.backgroundSize = '250%'; }, false); imgToZoom.addEventListener("mousemove", function (event) { var position = this.getBoundingClientRect(); var x = event.clientX - position.left; var y = event.clientY - position.right; var xpercent = Math.round(100 / (position.width / x)); var ypercent = Math.round(100 / (position.height / y)); this.style.backgroundPosition = xpercent + '% ' + ypercent + '% '; }, false); imgToZoom.addEventListener("mouseleave", function (event) { this.style.backgroundSize = "cover"; this.style.backgroundPosition = "center"; }, false); function zoomIn() { var currentW = imgToZoom.clientWidth; imgToZoom.style.width = (currentW + 200) + "px"; } function zoomOut() { var currentW = imgToZoom.clientWidth; if (currentW == 100) return false; else imgToZoom.style.width = (currentW - 200) + "px"; } zoomInBtn.addEventListener("click", zoomIn()); zoomOutBtn.addEventListener("click", zoomOut()); })