Lupe mit Touchmove funktion ?

[Sempervivum]

Hallo @"oliver_z3",
weil ich das Thema interessant finde, dachte ich, ich registriere mich Mal um antworten zu können. Bekomme jedoch die Meldung "Willkommen zurück" - ganz vergessen, dass ich mich früher schon mal registriert hatte.

Ich dachte zunächst, es liege daran, dass Du bei "touchstart" und "touchend" nichts tust um die Lupe sichtbar zu machen und zu verbergen aber das hat noch nicht zum Erfolg geführt.
Mit "touchmove" warst Du natürlich schon auf dem richtigen Wege. Das funktioniert dann ein wenig anders als ein einfaches event.target und berücksichtigt auch, dass mehrere Finger den Bildschirm berühren. Man kann das bei MDN nachlesen.

Diese Javascript funktioniert dann bei mir, ich kann die Lupe durch Ziehen mit dem Finger bewegen:

Code:

        'use strict';

        class imageLoupe {
            constructor(image) {
                // Original Image
                this.originalImage = image;

                // Enlarged Image
                this.enlargedImage = document.createElement('img');
                this.enlargedImage.src = this.originalImage.src;
                this.enlargedImage.setAttribute('data-loupe-enlarged-image', '');

                // Wrapper
                this.wrapper = document.createElement('div');
                this.wrapper.setAttribute('data-loupe-wrapper', '');

                // Loupe
                this.loupe = document.createElement('div');
                this.loupe.setAttribute('data-loupe', '');

                // Add elements to the DOM
                this.wrapper.appendChild(this.loupe);
                this.loupe.appendChild(this.enlargedImage);
                this.originalImage.parentNode.insertBefore(this.wrapper, this.originalImage);
                this.wrapper.appendChild(this.originalImage);

                // Pass this through to methods
                this.showLoupe = this.showLoupe.bind(this);
                this.hideLoupe = this.hideLoupe.bind(this);
                this.moveLoupe = this.moveLoupe.bind(this);

                this.addEventListeners();
            }

            addEventListeners() {
                this.originalImage.addEventListener('mouseenter', this.showLoupe);
                this.originalImage.addEventListener('mouseleave', this.hideLoupe);
                this.originalImage.addEventListener('mousemove', this.moveLoupe);
                this.originalImage.addEventListener('touchstart', this.showLoupe);
                this.originalImage.addEventListener('touchend', this.hideLoupe);
                this.originalImage.addEventListener('touchmove', event => {
                    // Added additional parameter "isTouch"
                    // Set to true when device is operated by touches
                    this.moveLoupe(event, true)
                });
            }

            showLoupe() {
                this.wrapper.style.zIndex = 1;
                this.loupe.style.opacity = 1;
            }

            hideLoupe() {
                this.wrapper.style.zIndex = 0;
                this.loupe.style.opacity = 0;
            }

            moveLoupe(event, isTouch) {
                window.requestAnimationFrame(() => {
                    // Get the size and position of the original image
                    this.originalImageBCR = this.originalImage.getBoundingClientRect();
                    // Get position according to parameter "isTouch"
                    let posX, posY;
                    if (isTouch) {
                        // Device is operated by touches
                        posX = event.targetTouches[0].clientX;
                        posY = event.targetTouches[0].clientY;
                        // Disable default action (panning)
                        event.preventDefault();
                    } else {
                        // Device is operated by mouse
                        posX = event.x;
                        posY = event.y;
                    }
                    // Get the cursor coordinates on the original image
                    this.cursorX = posX - this.originalImageBCR.left + this.originalImage.offsetLeft;
                    this.cursorY = posY - this.originalImageBCR.top + this.originalImage.offsetTop;

                    // Determine the corresponding coordinates on the enlarged image
                    this.enlargedImageX = -((this.cursorX - this.originalImage.offsetLeft) / this.originalImageBCR.width * this.enlargedImage.width - this.loupe.offsetWidth / 2);
                    this.enlargedImageY = -((this.cursorY - this.originalImage.offsetTop) / this.originalImageBCR.height * this.enlargedImage.height - this.loupe.offsetHeight / 2);

                    // Center the loupe on the cursor
                    this.loupeX = this.cursorX - this.loupe.offsetWidth / 2;
                    this.loupeY = this.cursorY - this.loupe.offsetHeight / 2;

                    // Apply the translate values
                    this.enlargedImage.style.transform = `scale(2) translate3d(${this.enlargedImageX}px, ${this.enlargedImageY}px, 0)`;
                    this.loupe.style.transform = `translate3d(${this.loupeX}px, ${this.loupeY}px, 0)`;

                });
            }


        }

        // Create a new loupe for each image
        document.querySelectorAll('[data-loupe-image]').forEach(function (img) {
            new imageLoupe(img);
        });

Ich habe Kommentare hinzu gefügt wo ich etwas geändert habe.