Forum Discussion
create a magnifying glass to read the different regions of an image
Good evening
I would like to know how to zoom the different regions of an image in storyline 360. I do not want the learner to use the player functions. I hope that by moving around the image with...
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 resultclip-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
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.
