How to Add Interactive Image Zooming in Articulate Storyline with Storyline Panzoom

Articulate Storyline is a powerful tool for creating interactive eLearning experiences, but its built-in zooming feature has limitations. If you need smooth, user-controlled zooming on specific objects, I’ve got a solution for you StorylinePanzoom.

This JavaScript library lets users zoom in and out with a simple scroll, giving you more flexibility and control over your content. Let’s dive into how you can easily integrate it into your Storyline project.

Live Demo & Preview

Want to see it in action? Try the interactive demo below:

---

Why Use Storyline Panzoom?

By default, Storyline’s zooming functionality is quite basic. With StorylinePanzoom, you get:

✅ Smooth zooming using the mouse scroll (scroll up to zoom in, scroll down to zoom out)
✅ Custom zoom levels to fit your needs (set min/max zoom)
✅ Easy implementation with just a few lines of JavaScript
✅ Full control over zoom behavior on a per-object basis

This is perfect for interactive diagrams, detailed images, maps, or any content where zooming can enhance the learning experience.

---

How to Implement Storyline Panzoom in Your Project

Follow these simple steps to integrate the zoom feature into your Storyline project:

Step 1: Open Slide Master & Create a JavaScript Trigger

1. Open your Articulate Storyline project.
2. Navigate to View → Slide Master.
3. Select the Master Slide where you want the zoom effect to be available.
4. Add a JavaScript trigger and paste the following code:

Step 2: Copy Your Object’s Accessibility Name

1. Select the image or object you want to apply the zoom effect to.
2. Open the Accessibility settings (found in the object’s properties).
3. Copy the Accessibility Name (you’ll use this in the JavaScript code).

Step 3: Execute JavaScript When the Timeline Starts

1. Go to your slide and create a new JavaScript trigger.
2. Set the trigger to run When the reaches 0.25s.
3. Paste the JavaScript code:

1. Replace 'Your_Object_Accessibility_Name' with the name you copied in Step 2.
2. Adjust the maxScale and minScale values to set your preferred zoom limits.

Example Configuration

StorylinePanzoom.init('my_zoomable_image', { maxScale: 3, minScale: 1 });

This means:

• The object will zoom up to 3x its original size.
• The minimum zoom level is 1x (original size).
• Users can control zooming using their mouse scroll or double tap on touch devices.

Download Source File:

---

Other Free Storyline Zooming Libraries

I’ve also developed two more object zooming tools for the eLearning community. Feel free to check them out:

---

Final Thoughts

With StorylinePanzoom, you can enhance learner engagement by giving them the ability to explore images and objects in more detail. Whether you’re working on interactive maps, technical diagrams, or detailed illustrations, this library will make your eLearning projects more dynamic and user-friendly.