How to Add a Magnifying Glass to Your Storyline Images

How to Add a Magnifying Glass to Your Storyline Images
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!

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

Download Source File

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

Support the Mission

Creating and maintaining these resources requires a significant amount of time and effort. If you have found value in my work and would like to support me, you can show your appreciation by buying me a virtual coffee. By supporting my work, you contribute to the continued development and improvement of the resources I provide. Your gesture helps me stay motivated and dedicated to creating high-quality content, exploring cutting-edge technologies, and staying up-to-date with the latest trends.

Share this article
Shareable URL
Comments 4
  1. It’s wonderful. But it worked for me once and at the second time didn’t, probably because it works better for larger images to get a better look at details, not at small pictures to get a zoom as I tried.

    1. Hi Kinga, I’m pleased to inform you that the library has been updated to the latest version. All known bugs have been resolved, and additional customization options have been incorporated. Please make sure to utilize this latest version for optimal performance.

  2. In version #1 the magnifier was round in shape. In version 1.1 the magnifier shape is square with rounded corners. Am I doing something wrong here? I liked the round magnifier.

Leave a Reply

Your email address will not be published. Required fields are marked *

Read next