https://avtonavix.ru/bitrix/templates/desktop/js/zoomAndPan.js

1//if ( typeof product !== 'undefined' ) {
2    const product = document.querySelector('.image-stage');
3    const img = document.querySelector('.image-wrap');
4    const plus = document.querySelector('.control-in');
5    const minus = document.querySelector('.control-out');
6    let isDown = false;
7    let startX;
8    let stateY;
9
10plus.addEventListener('click', (e) => {
11   product.classList.add('zoom-in');
12});
13
14minus.addEventListener('click', (e) => {
15   product.classList.remove('zoom-in');
16   img.style.transform = 'translateX(' + 0 + 'px' + ') translateY(' + 0 + 'px' + ')';
17});
18
19function getPositions(e) {
20
21   isDown = true;
22
23   startX = e.pageX - product.offsetLeft;
24   startY = e.pageY - product.offsetTop;
25
26   product.classList.add('zoom-in');
27
28}
29
30function disable(e) {
31   isDown = false;
32}
33
34function zoomPan(e) {
35
36   if(!isDown) return; //stop fn if mouse is not dowm
37
38   e.preventDefault();
39
40   const x = e.pageX - product.offsetLeft;
41   const y = e.pageY - product.offsetTop;
42   const panX = x - startX;
43   const panY = y - startY;
44
45   img.style.transform = 'translateX(' + panX + 'px' + ') translateY(' + panY + 'px' + ')';
46
47}
48
49// Desktop
50product.addEventListener("mousedown", getPositions);
51product.addEventListener("mouseup", disable);
52product.addEventListener("mouseleave", disable);
53product.addEventListener("mousemove", zoomPan);
54
55// Touch
56product.addEventListener("touchstart", getPositions);
57product.addEventListener("touchend", disable);
58product.addEventListener("touchcancel", disable);
59product.addEventListener("touchmove", zoomPan);
60
61//}