https://tap-retail.com/web_assets/js/TinyZoom.js

1class TinyZoom {
2    constructor(selector) {
3        const images = document.querySelectorAll(selector);
4
5        images.forEach((image) => {
6            image.style.cursor = 'pointer';
7            image.addEventListener("click", () => {
8                this.makeFullscreen(image);
9            });
10
11            image.addEventListener("touchstart", (event) => {
12                event.preventDefault();
13                this.makeFullscreen(image);
14            });
15        });
16    }
17
18    makeFullscreen(image) {
19        const fullscreen = document.createElement('div');
20        fullscreen.classList.add("fullscreen-image");
21
22        const canvas = document.createElement('canvas');
23        const ctx = canvas.getContext('2d');
24
25        let dragStartX, dragStartY, dragged;
26        let scaleFactor = window.devicePixelRatio || 1;
27
28        let isLandscape = screen.orientation.type.startsWith("portrait") ? false : true;
29
30        canvas.style.maxWidth = '85%';
31        canvas.style.maxHeight = '85%';
32        canvas.width = image.width * scaleFactor;
33        canvas.height = image.height * scaleFactor;
34
35        ctx.scale(scaleFactor, scaleFactor);
36        ctx.drawImage(image, 0, 0, image.width, image.height);
37
38        // If the image is too large for the screen, scale it to fit
39        var viewportWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
40        var viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
41
42        /*if (isLandscape) {
43            var overscaleWidth = (image.width * 1.1 > viewportWidth) ? (viewportWidth / image.width) * 0.90 : 1;
44            var overscaleHeight = (image.height * 1.1 > viewportHeight) ? (viewportHeight / image.height) * 0.90 : 1;
45        } else {
46            var overscaleWidth = (image.height * 1.1 > viewportHeight) ? (viewportHeight / image.height) * 0.90 : 1;
47            var overscaleHeight = (image.width * 1.1 > viewportWidth) ? (viewportWidth / image.width) * 0.90 : 1;
48        }*/
49
50        var overscaleWidth = (image.width * 1.1 > viewportWidth) ? (viewportWidth / image.width) * 0.90 : 1;
51        var overscaleHeight = (image.height * 1.1 > viewportHeight) ? (viewportHeight / image.height) * 0.90 : 1;
52
53        fullscreen.appendChild(canvas);
54        document.body.appendChild(fullscreen);
55
56        fullscreen.addEventListener('click', (event) => {
57            if (event.target === fullscreen) {
58                fullscreen.remove();
59            }
60        });
61
62        fullscreen.addEventListener('wheel', (event) => {
63            if (event.target === fullscreen) {
64                event.preventDefault();
65            }
66        });
67
68        function zoom(scale) {
69            scaleFactor *= scale;
70            canvas.style.transform = `scale(${scaleFactor})`;
71            redraw();
72        }
73
74        function redraw() {
75            ctx.clearRect(0, 0, canvas.width, canvas.height);
76            ctx.drawImage(image, 0, 0, image.width, image.height);
77        }
78
79        // Set the position of the canvas to absolute
80        canvas.style.position = 'fixed';
81        canvas.style.left = (viewportWidth / 2) - (image.width / 2) + 'px';
82        canvas.style.top = (viewportHeight / 2) - (image.height / 2) + 'px';
83        canvas.style.cursor = 'move';
84
85        canvas.addEventListener('wheel', (event) => {
86            event.preventDefault();
87            const scale = event.deltaY > 0 ? 0.9 : 1.1;
88            zoom(scale);
89        });
90
91        canvas.addEventListener('mousedown', (event) => {
92            dragStartX = event.pageX - canvas.offsetLeft;
93            dragStartY = event.pageY - canvas.offsetTop;
94            dragged = true;
95        });
96
97        canvas.addEventListener('mousemove', (event) => {
98            if (dragged) {
99                // Calculate the new position of the element
100                const x = event.pageX - dragStartX;
101                const y = event.pageY - dragStartY;
102
103                // Set the position of the element
104                canvas.style.left = `${x}px`;
105                canvas.style.top = `${y}px`;
106            }
107        });
108
109        canvas.addEventListener('mouseup', () => {
110            dragged = false;

111        });
112
113        canvas.addEventListener('dblclick', (event) => {
114            zoom(event.shiftKey ? 0.5 : 2);
115        });
116
117        var overScale = Math.min(1.0, overscaleWidth, overscaleHeight);
118        if (overScale != 1) {
119            scaleFactor = overScale;
120            canvas.style.left = (viewportWidth / 2) - ((image.width * scaleFactor) / 2) + 'px';
121            canvas.style.top = (viewportHeight / 2) - ((image.height * scaleFactor) / 2) + 'px';
122            zoom(1);
123        }
124    }
125}
126
127// Use the library
128window.addEventListener("load", () => {
129    new TinyZoom(".TinyZoom");
130});