How do you zoom in on a 360° image?

May 31, 2022

Is there a way learners can zoom in on a 360° image?  It's probably starring me in the face and I'm just not seeing it.  If I can't, I can always add a hotspot with an up close picture of the item, but I see that getting very messy. I want the learner to explore on their own. Ideas? Suggestions? 

Thanks!

Penny

9 Replies
Penny Spacht

Thanks Tom & Andrea.  I'll put through a request for this.

This is my vision: Insurance professionals often look for "clues."

Example 1: An insurance agent is meeting with the homeowners in their house.  If you look around, there are several items indicating that they are operating a home business - . If the agent doesn't ask the right questions and the homeowners don't disclose the information the business might not be covered.  While I could put a hotspot showing there is mail on the coffee table addressed to "Marie's Let Them Eat Cake," it's not the same as letting learners find the clues for themselves. 

Example 2: you are an insurance adjuster at the scene of a traffic accident.  Several businesses in the area have security cameras but they are not visible at first glance. This is an important clue as the video could prove that our policyholder was not at fault for the accident. 

It could also be turned into a fun game. You could "link" multiple rooms together and send learners on a scavenger hunt. Who knows it could be Colonel Mustard in the conservatory with the lead pipe. :) 

 

 

Penny Spacht

About 10 years ago we bought a product called Tourweaver.  While it had a lot of bells and whistles for the time, it was a pain to work with. We have no intentions of using them again. But here is a sample of their work https://www.easypano.com/virtual-tour-gallery.html Controls are similar to PDF where you can use + or - to zoom in or out.

Jonathan Huguenin

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 });