How to scale wzoom to the rotated image?

[IgorSerebryanskiy]

Hello,

Probably it is not an issue. But could you please let me know how is it better to update wzoom parameters or object to use it for the rotated images? I mean that initially, the image is horizontal, like 800x600 px. Then I use css transform rotate style (interaction with the user) and the image becomes vertical, like 600x800 px. And then the wzoom doesn't work properly due to the size was changed. And what do I need to do to update wzoom? Does it make sense?

Thank you in advance.

Best regards,
Igor

[worka]

Hello,

Quick way "on the knee". Works pretty well 😉

let degreeRotation = 0;

function changeTransformRotateProperty(element, value) {
    element.style.transform = `${ element.style.transform.replace(/(^|\s)rotate\(\d+deg\)($|\s)/i, '') } rotate(${ value }deg)`;
}

function rotateImage() {
    const animationDuration = .2;

    image.style.transition = `transform ${ animationDuration }s`;
    changeTransformRotateProperty(image, degreeRotation);

    if (degreeRotation > 270 && animationDuration) {
        setTimeout(() => {
            changeTransformRotateProperty(image, 0);
        }, animationDuration * 1000);
    }
}

const observer = new MutationObserver(rotateImage);

observer.observe(image, { attributes: true, attributeFilter: [ 'style' ] });

rotateButton.addEventListener('click', () => {
    degreeRotation += 90;

    rotateImage();
});

Demo

😊😊😊

P.S. have never used MutationObserver before, maybe there are pitfalls
P.P.S pls, close issue if we resolved your question (link to this issue has been added to the README, maybe it will be useful to someone)

[IgorSerebryanskiy]

Ok, thank you.

[MathieuDerelle]

There is a problem with your demo : when the image is vertical, the bottom and the top of the image are cropped.
Is there a way to change the scale factor correctly ?

[worka]

There is a problem with your demo : when the image is vertical, the bottom and the top of the image are cropped. Is there a way to change the scale factor correctly ?

Indeed there is such a problem. This is due to the fact that the image has a scale set when the plugin is initialized, and then we rotate the image without using the plugin. I have not yet found any adequate solution to this problem other than how to make the block in which the image is located square.

Demo