create a magnifying glass to read the different regions of an image

Basic setup to get something like this working..

- Add the image to 2 layers.. 1 small sized and 1 in the zoomed-in larger size.
- Use a clip-path to mask the bigger layer to a circle. Check https://bennettfeely.com/clippy/ Something like this will be the result
clip-path: circle(20% at 50% 50%);
- Then you need to ensure the upper layer.. the one with the clip-path moves/drags along when moving. I advice using GSAP Draggable for that.

Code pen sample here:
https://codepen.io/creme/pen/gOYrvxM

or this one...
https://malaman.github.io/js-image-zoom/example/basic.html

Solutions for this are plenty.
https://www.w3schools.com/howto/howto_js_image_zoom.asp

Hi Patrick! In case you haven't seen it, we recently upload an example by Paul Alders - Storyline: Room Exploration Interaction. He uses a magnifying glass to explore the different parts of the slide. You can download the file to look behind the scenes to see how it works. Hope that gives you more options! 

In Articulate Storyline 360, you can create a magnifying glass effect to zoom in on different regions of an image by using layers and triggers. Here are the steps to achieve this effect:

Import your image into Storyline by going to the "Insert" tab and selecting "Picture."
Adjust the size and position of the image on your slide as needed.

Create a new slide layer by clicking on the "Slide Layers" pane and then clicking the "New Layer" button.
Rename the layer to something like "Magnifying Glass."
Insert an image of a magnifying glass or any shape you want to use as your magnifier onto the "Magnifying Glass" layer. Position it where you want the zoomed area to appear.
Adjust the size of the magnifying glass image to your liking.

Create another slide layer for the zoomed area. Rename it accordingly.
On the zoomed layer, insert a rectangle or shape to cover the area you want to zoom in on. This will serve as the zoomed area.
Adjust the size and position of the shape to cover the desired region of the image.
Set the fill of the shape to be a cropped portion of your original image. To do this, right-click the shape, go to "Format Shape," choose "Fill," and then select "Picture or texture fill." Upload your image and adjust the positioning to display the desired region.

Go back to your base layer.
Create a trigger to show the "Magnifying Glass" layer when the timeline starts or when the learner clicks on something (e.g., a button or hotspot) that should activate the magnifying glass.
Create another trigger to show the zoomed layer when the learner hovers over or clicks on the magnifying glass.
Create a trigger to hide the "Magnifying Glass" layer when the learner moves away from the magnifying glass.
Create a trigger to hide the zoomed layer when the learner clicks on it or moves away from it.

Preview your slide to test the magnifying glass effect. The magnifying glass should appear when activated, and the zoomed area should display when the learner hovers over or clicks on it.
Adjust the timing and animations as needed to achieve the desired effect.
By following these steps, you can create a magnifying glass effect in Storyline 360 that allows learners to zoom in on different regions of an image without using the player functions.

hello,

thank you for this answer but this idea does not allow you to move the magnifying glass on the image and zoom in on different regions of this image. Could you possibly share with me a story point so that I can better understand your explanation?

Thanks in advance

Hello,

I thank you for your response but I do not master javascript code; Could you give me the lines of javascript code to insert in storyline and where I must insert the image to zoom in the script.Thanks for your help I am attaching the image to you.

Thanks for your help

Either learn Javascript or stick to old fashioned Storyline triggers.

Math, when you say to layers do you mean two layers in storyline like the base layer would be the orginal picture and then layer 1 would be the zoomed in image with a clip path or is it two layers in the timeline on the base layer.

Thanks