How do you zoom in on a 360° image?

Hello Penny and hello everyone.

My contribution comes a little late, but I hope it will be useful 🍀

I had the same situation, and with a JavaScript code (automatically triggered at the beginning of the slide) I managed to create a Zoom effect with the mouse wheel.

Here's the code and the values "scaleStep" (each zoom "notch") and "maxScale" (zoom power) can be adjusted.

This is still experimental (so think about testing), but I'm sure there will be people to help and improve this code.

It's also important to use the recommended image sizes (to avoid blurring with zoom): https://community.articulate.com/series/articulate-storyline-360/articles/storyline-360-adding-and-editing-360-degree-images

Here's an example if you're interested: https://lesdemos.elearningimpact.com/qt/zoom_360

---

let scale = 1;
const scaleStep = 0.1;
const maxScale = 2;

const slideContainer = document.getElementById('slide-window');
slideContainer.style.transition = "transform 0.1s";

slideContainer.addEventListener('wheel', function(event) {
    if (event.deltaY < 0) {
        if (scale < maxScale) {
            scale += scaleStep;
            if (scale > maxScale) {
                scale = maxScale;
            }
        }
    } else {
        if (scale > 1) {
            scale -= scaleStep;
            if (scale < 1) {
                scale = 1;
            }
        }
    }

    slideContainer.style.transform = `scale(${scale})`;
    event.preventDefault();
}, { passive: false });