How to Add a Magnifying Glass to Your Storyline Images

Ever find yourself squinting at small details in your Storyline images? Forget about complicated stuff – I’ve got a simple tutorial to show you how to add a cool magnifying glass in just 3 easy steps. No more tricky zoom regions or extra pop-ups!

Preview

Step 1: Set Up a JavaScript Trigger on Master Slide When Timeline Starts on Slide

To kick off this easy enhancement, you’ll first need to set up a JavaScript trigger on the master slide. Here’s how:

1. Open your Articulate Storyline project and navigate to the Master Slide. Choose the Master slide.
2. Go to the Triggers panel and add a new trigger: When Timeline Start. Paste the following code into the JavaScript window:

Step 2: Identify and Note Down ALT Text for Your Image

The next step involves enhancing accessibility. Right-click on the image you wish to magnify, open the Accessibility Tab, and take note of its ALT text. This is crucial for ensuring your e-learning content remains inclusive.

Step 3: Set Up a JavaScript Trigger on Image Hover

Now, let’s make the magic happen when users hover over your image. Follow these steps:

1. Return to the Triggers panel and add JavaScript trigger on your slide.
2. Paste the following code, replacing “Your_IMAGE_Alt_Text” with the ALT text you noted down in Step 2:

Pro Tips:

i. Magnify More Images:

Want to magnify more images? Simply repeat Steps 2 and 3 for each image you want to enhance.

ii. Customize the zoom level:

Adjust the zoom level easily. For example, for a 2x zoom, use:

nrzMagnify("Write_Your_IMAGEaccessibility_Name", 2);

iii. Control the magnifier size to fit your needs:

For instance, for a 350px magnifier, use:

nrzMagnify("Write_Your_IMAGEaccessibility_Name", 2, 350);

iv. Change Magnifier Shape:

For a circular magnifier, use:

 nrzMagnify("Your_IMAGE_Accessibility_Name", 2, 350, 'circle');

Download Source File

Ready to upgrade your e-learning projects? Download the source file here: