Forum Discussion

PennySpacht's avatar
PennySpacht
Community Member
3 years ago

How do you zoom in on a 360° image?

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

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

    • JeremyHaddock-2's avatar
      JeremyHaddock-2
      Community Member

      I have a project where we want to zoom on 360 images. I added your JavaScript and it seems to work great. Thank you!

  • Currently, the feature isn't set to allow zooming in like you would if you were just looking at a 360 image online. 

  • Hi Penny!

    As Tom mentioned, we do not have a current feature to allow learners to zoom in on a 360° image in Storyline. 

    Please feel free to submit a feature request and share how this would benefit you. Then, we can update you if it makes it onto our feature roadmap in the future! 

  • PennySpacht's avatar
    PennySpacht
    Community Member

    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. :) 

     

     

  • PennySpacht's avatar
    PennySpacht
    Community Member

    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.

  • Hi, I am also very interested in the possibility to zoom in a 3d image.
    In the context of a serious game, it now seems essential to have this option so that the learner can really find hidden objects. Could you program this development?