\n

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.

\n

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:

\n

\n

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

\n

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.

\n

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.

\n

How Do Lightboxes Work in Storyline 360?

\n

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.

\n

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?

\n

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.

\n

Triggering the Lightbox

\n

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.

\n

\n

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

\n

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

\n

\n

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.

\n

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.

\n

\n

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.

\n

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

\n

\n

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. 

\n

\n

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. 

\n

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: 

\n

\n

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

\n

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

\n

Adding a Lightbox to the Course Player

\n

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?

\n

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

\n

From the player properties, select the Features tab.

\n

\n

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

\n

\n

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.

\n

\n

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.

\n

\n

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

\n

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.

\n

\n

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

\n

Resources

\n

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:

\n

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

\n

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

\n

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.

\n

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.

\n

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:

\n

\n

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

\n

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.

\n

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.

\n

How Do Lightboxes Work in Storyline 360?

\n

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.

\n

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?

\n

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.

\n

Triggering the Lightbox

\n

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.

\n

\n

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

\n

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

\n

\n

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.

\n

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.

\n

\n

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.

\n

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

\n

\n

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. 

\n

\n

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. 

\n

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: 

\n

\n

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

\n

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

\n

Adding a Lightbox to the Course Player

\n

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?

\n

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

\n

From the player properties, select the Features tab.

\n

\n

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

\n

\n

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.

\n

\n

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.

\n

\n

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

\n

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.

\n

\n

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

\n

Resources

\n

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:

\n

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

\n

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

\n

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.

I have an mp4/video that I've placed two transparent buttons over two different areas on the mp4 to trigger two different lightboxes. It looks like the triggers only allow me one lightbox per slide is that correct?

Ditto Moses comment, if the lightbox slides are added to the Menu and clicked in the menu navigation pane then ticks appear but if you click a button/hotspot in a slide to open the lightbox slide they do not get ticked.

Thanks Hugh!

I did try that but shortly after I realized that if you manually add an item/slide into the Menu (via the player) , yes it will show up in the menu, yes, it will get checkmarked when clicked, BUT because it was a slide that was manually added to be displayed in the Menu, Storyline doesn't know which slide it is \"associated\" with, so, when the user clicks on the manually added lightbox, it takes them to the 1st slide(restart the course).

I didn't know how to fix that so I ended up creating my own \"lighbox effect\" using regular slides, branching accordingly, and adjusting the size of the visuals to make it look like an actual lightbox. Because it's a \"regular\" slide, it does appear in the Menu and it does what its supposed to when clicked on from the menu.

In a nutshell, going forward, I'll just create my own \"lightboxes\"

Hello. I noticed that the lightboxes are not being check marked in the Menu. Is this normal? Is there a way I can make them be marked \"complete\" with that checkmark

is there a way to change the colors of the lightbox controls (Meaning the X button)?

With the modern dark player, the button gets lost in the color scheme.

It looks like it's a black circle with a white X in it. The X is very thin and the black circle gets lost in the dark theme. It's much more noticeable in the light theme.

Hi David. Thanks for reading and commenting. We do have a pending feature request for controlling lightbox color schemes and I'll be sure to add your name to the list of folks interested in seeing that implemented.

In the meantime, I wanted to share an article from my colleague Allison who walks through how to create a lightbox effect in Storyline: https://community.articulate.com/articles/how-to-create-a-custom-lightbox-effect-in-storyline-360. Going with a simulated lightbox would give you the greater degree of customization you're looking for.

I created a lightbox in my project to appear once a user presses certain keys from their keyboard. I included navigation controls, however when I trigger this event the navigation controls do not show up when I press the keys on my keyboard. Might anyone know what to do?

I didn't know you could add a custom tab to the player! I will definitely be using this feature in future for general course navigation instructions.

One of my favorite features in Storyline!

A significant amount of the training I've been building the past few years are various systems and their operations. I use the \"base\" slide to show the 1-line diagram showing the system operation and process. The learner will then be able to select each step in the diagram to see an actual photo of the piece of equipment and where the item is located, along with the item on the equipment they must manipulate for the system to operate correctly.

Great discussion. I need the users to view/read a couple of slides with text and then complete a google survey (google forms) and want them to get back the course.
If I insert the survey as a 'web object' on storyline, will the 'light box' feature allow users to click answers for the survey within the screen?

Thanks in advance

It should. A lightbox slide can work just like any other slide.

Hi, I have a question about lightboxes. Let's say I have ten slides, eight that you can access normally and two that appear as lightboxes when you click something in the course. In my publish settings, I make the selection Complete/Incomplete based on the learner viewing all ten slides. Do the two lightboxes count as slide views? Or do they work differently since the learner doesn't access them like a base slide?

Kristen - It counts each slide, regardless of if its a regular Slide or Lightbox Slide as a single slide. For quiz questions from a quiz bank, it counts the number of slides, it is supposed to ask. What my company does, because we give them the option not to click the Lightbox slides and skip the standard navigation/player slide(s), is to reduce the number of required slides to approximately 2/3 - 3/4 of the total number of slides. Now if you are going to require them to view the lightbox slides, I would set up the solution Owen listed, with the T/F Variable or a button state as \"visited\". Then if the variable(s) or states are visited, the course would record completion.

I have this same question. Did you ever figure something out to not include the lightbox slide in the total slide count if they have to touch every slide to get a completion?

I did some searching and found this article that might be helpful. I have not tried it yet.

Excluding Slides and Scenes from Slide Counts
https://community.articulate.com/articles/storyline-360-add-slide-numbers#:~:text=Excluding%20Slides%20and%20Scenes%20from%20Slide%20Counts,-Control%20how%20your&text=In%20Slide%20View%2C%20go%20to,to%20count%2C%20then%20click%20OK.

This is a very helpful tutorial. I have one question I cannot find the answer to. I have created a lightbox in a new scene with 3 slides. It is working as it should, however, I thought that the lightbox slides do not show up on the left navigation menu. Is it default that they still show up on the left menu? Is there a way to change it so that the lightbox slides do not show up on the left menu?
thank you.
Carolyn

Glad you found this article and tutorial helpful. The slides you've added to a lightbox will appear in the player navigation menu by default, but you can hide them. Here's a link to the Storyline 360 User Guide instructions for removing menu items: https://community.articulate.com/articles/articulate-storyline-360-user-guide-how-to-customize-the-menu#delete I hope this helps you out, Carolyn!

Is there a way to not include the lightbox slide in the number of slides viewed total for LMS tracking if they have to touch every slide to get a completion?