Articulate Storyline Lightbox

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.

Articulate Storyline’s lightbox feature works similarly. Triggering content to be displayed in a lightbox causes whichever slide you choose to appear in a box over the current slide—in other words, everything else in view grows dim, and the lightbox slide appears over the dimmed course.

Articulate Storyline Lightbox Example

A lightbox allows you to link to content from one part of your course to your learner’s current place in the course. This can be especially helpful for getting ancillary or supporting content such as references, resources, or media off the main content screens and out of your learner’s way. It’s also great for navigation instructions, a table of contents, or any other supporting assets that need to be globally available.

These are only a few ideas for taking advantage of the versatility of lightboxes. Let’s take a closer look at lightboxes so you can start unlocking the possibilities for yourself.

How Do Lightboxes Work in Storyline?

In Storyline, a lightbox is a trigger action (more on that in a moment) that can be applied to any slide or a series of consecutive slides.

Once you’ve elected to lightbox slide(s), the size, placement, and appearance of the lightbox is pre-built for added convenience, including a red X button trigger to close the lightbox. These features make it quick and easy for you to create a consistent user experience; but the trade-off is the loss of customization control over these lightbox attributes.

If you’re looking for greater 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 full-size screen.

Triggering the Lightbox

Once you’ve created content slides for your lightbox, now what? To get your content into a lightbox, you’ll need to start with a trigger. You’ll find the “Lightbox slide” option under the action menu in the trigger wizard.

Lightbox on Trigger Wizard Action drop-down

Once you’ve selected Lightbox slide, you’ll need to tell Storyline which slide(s) it should trigger.

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

Articulate Storyline Slide drop-down

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. Then you’ll 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 forward/backward navigation buttons or arrows from your lightboxed slides if you’ll be using Storyline’s navigation controls.

Articulate Storyline Lightbox Navigation Controls

Once you’ve specified the slides to lightbox, it’s time to tell Storyline when to trigger this effect.

From the “When” drop-down menu, you can choose from lengthy lists under Click Events, Timeline Events, Drag Drop Events, and Other Events, including state or variable changes, mouse hovers, and slider moves.

Articulate Storyline Events

The next step is to tell Storyline what object will trigger the lightbox. For example, the action to “Lightbox slide” should happen to Slide 2.1 when the user clicks on Button 1. This is an example of an object trigger.

Articulate Storyline Trigger Wizard Object

If you’re using Storyline’s built-in navigation buttons, you’ll also have the option to trigger your lightbox when the user clicks Next, Previous, or Submit. This is known as a player trigger.

Lightboxes can also be triggered from a slide layer, with all of the same trigger options that apply to slides. This is known as a layer trigger.

Articulate Storyline Layer Trigger

Finally, Storyline needs to know if you’re looking for any specific conditions or criteria for launching the lightbox. For instance, what if you only wanted the learner to be able to access the lightbox after they’ve visited all topics on a menu? You can specify any conditions to be met by clicking Show Conditions and setting your requirements. For more details on trigger conditions, check out this how-to article from our knowledge base: Adding Triggers.

And for a complete run-down on Triggers, be sure to check out Nicole Legault’s recent article All About Triggers: Everything You Need to Know.

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.

Articulate Storyline Player Features

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, “Navigation Help” or “Videos.” In the example pictured below, I named my new tab “Character Bios.”

Articulate Storyline Trigger Wizard Course Player

Once you’ve named your new tab you can choose Topbar Left or Topbar Right for placement of your new tab.

In the action field of the trigger wizard panel, select the lightbox trigger and then choose the content slide(s) you’d like to have appear in the lightbox.

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 verify 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 articles and free template downloads:

How to Build a Brilliant Media Gallery

3 Subtle Ways to Integrate Navigation Instructions (includes a free download)

Storyline: Character Study Template

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 something you learned here, but don't have Articulate software? Download a free trial, and come back to E-Learning Heroes regularly for more helpful advice on everything related to e-learning.

22 Comments
Trina Rimmer
Alexander Lindblom
Lieven Van Den Hoeven
Trina Rimmer