All About Lightboxes in Storyline 360

Whether you’ve designed a website or simply done your fair share of web surfing, you’ve probably run across lightboxes. They’re often used to display content (particularly images or video on photography websites) while dimming out the web page background.

The lightbox feature in Storyline 360 works similarly. Triggering content to be displayed in a lightbox allows the slide of your choice to appear in a pop-up window over the current slide, which is dimmed. Here’s an example:

Click here to explore the interactive version and here to download the template.

A lightbox allows you to show learners additional content without navigating away from the current slide, which could cause them to lose their spot in the course. This can be especially helpful for stuff like bibliographical references or links to external resources. It’s also great for navigation instructions, a table of contents, or any other supporting assets that need to be available throughout the course.

Let’s walk through how to add lightboxes to your Storyline 360 course so your learners can start reaping the benefits of this powerful feature.

How Do Lightboxes Work in Storyline 360?

In Storyline 360, you can trigger any slide (or series of consecutive slides) to open in a lightbox. The size, placement, and appearance of the lightbox is prebuilt for you, to make it super simple. This includes a red X button that closes the lightbox window automatically when learners click. These features make it quick and easy for you to create a consistent user experience. However, the trade-off is that you can’t customize these lightbox settings.

If you’re looking for more control over the size, placement, or appearance of your lightbox content, you can always create your own pseudo lightbox effect using slide layers. To read more about how to do this as well as the pros and cons of this approach, check out this forum discussion: Lightbox Change Size?

Pro Tip: When designing content for use in a lightbox, keep scale in mind. The scale of objects on your content screens (e.g., text, buttons, images) will be about 75% of the original slide size.

Triggering the Lightbox

Once you’ve created content slides for your lightbox, what’s next? To get your content into a lightbox, you’ll need to add a trigger. You’ll find the Lightbox Slide option under the action menu in the Trigger Wizard.

Once you’ve selected Lightbox Slide, you’ll need to tell Storyline 360 which slide(s) to open.

From the Slide drop-down menu, select the slide you want to appear inside your lightbox.

If you’d like a series of slides to be lightboxed (e.g., for a media gallery), you’ll find it’s easier to place those slides into their own scene. That way you can simply select the first slide in that scene from the Slide drop-down and check the Navigation Controls box to allow learners to move forward and backward within that scene of lightboxed slides. You can also use your own navigation buttons, but your learners may find the size of Storyline’s default navigation controls a little easier to see and use.

Pro Tip: To keep learners from getting confused, be sure to remove any custom on-slide Forward/Backward navigation buttons or arrows from your lightboxed slides if you’ll be using the default player navigation controls.

Once you’ve selected the slides you want to appear in the lightbox, it’s time to tell Storyline 360 when to trigger this effect.

From the When drop-down menu, simply select the option that fits your needs. For example, when the user clicks.

Next, select the associated object. For example, in the screenshot below, the action to open the lightbox should happen on Slide 1.3 when the user clicks on the Previous button. 

If you’re using the built-in navigation buttons in Storyline 360, you can also trigger the lightbox to open when the user clicks on buttons built into the player, like Next, Previous, or Submit. Lightboxes can also be triggered to open from a slide or slide layer. 

Finally, you need to decide whether there are any specific conditions or criteria for launching the lightbox. For instance, what if you only want the learner to be able to access the lightbox after they’ve clicked on all the buttons on a slide, like in the example below: 

You can specify any conditions to be met by adding conditions to the trigger in the Trigger Wizard, as shown above.

For more details on trigger conditions, check out this tutorial: Adding Conditions.

Adding a Lightbox to the Course Player

It’s one thing to make a lightbox available on a single slide, but what if you want lightboxed content to be accessible throughout your course?

No problem! Storyline also gives you the ability to add a lightbox to the course player as an additional tab. Here’s how.

From the player properties, select the Features tab.

Under the Player Tabs section, click Add New (the blank paper icon):

In the Trigger Wizard panel, enter a name for your new tab in the name field—for example, “Contact” for a slide with contact information. This name is what learners will see in the player, so be sure to choose something that makes it obvious what kind of information learners will find there.

In the action field of the Trigger Wizard panel, select the lightbox trigger and then choose the content slide(s) you’d like to open up.

Just like adding a lightbox to a slide, you can specify conditions for triggering this lightbox effect from the course player.

When you’ve finished entering the information for your new tab, click OK. In the adjacent Storyline player preview, you should see your newly added tab.

To make sure that your lightbox is functioning properly, simply preview your project and click the newly added tab on the course player.

Resources

Hopefully this comprehensive look at lightboxes has given you some new ideas for using them in your courses. For even more lightbox design inspiration, check out these helpful resources:

• How Are You Using Lightbox Slides in E-Learning?
• 3 Subtle Ways to Integrate Navigation Instructions 
• Storyline Template: Lightbox Tabs
• Storyline Template: Integrated Navigation Instructions

What creative uses have you discovered for lightboxes? Leave your ideas in the comments below or share them with the E-Learning Heroes community.

Want to try lightboxes out for yourself, but don’t have Storyline 360? Start a free 30-day trial of Articulate 360, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning. If you have any questions, please share them in the comments.