\n

Using Lightbox Slides in E-Learning #316: Challenge | Recap

\n

Lightbox slides give course designers an elegant solution for presenting learners with important resources without leaving the current slide. Some of the most common use cases for lightbox slides include:

\n

\n
• Job aids and handouts
\n
• Tables of contents and menu navigation
\n
• Extended resources and reading lists
\n
• Video how-tos and other types of media
\n

\n

How Do Lightbox Slides Work?

\n

Lightbox slides are loaded on top of the current slide and resized to 80% of the original slide. To help learners focus on the lightbox content, the main slide background is dimmed, emphasizing the lightbox.

\n

\n

The best part about Storyline's lightbox slides is that any slide in your course can be used as a lightbox slide. This means any slide in your course (menu, dashboard, quiz results, interaction) can double as a lightbox slide.

\n

There are dozens of practical uses for lightbox slides. Let's look at a couple of examples.

\n

Workplace Learning & Performance

\n

This meet-the-team interaction from Joe Waddington is a fantastic example of how lightbox slides can reuse content across an entire course. 

\n

Each team member profile presents both individual and shared information. Personal info like one's name, job title, bio, and StrengthsFinder profiles are presented on the slide. But the shared info, the StrengthsFinder profile definitions, are loaded as lightbox slides since they're generic descriptions of each strength.

\n

\n

View project | Learn more & download | Joe Waddington

\n

DiSC Insights for Managers

\n

I like to share Jodi's example in my lightbox webinars because it shows how lightbox slides can be used to present content while helping learners remain focused in the moment without jumping out to new slides or scenes. 

\n

\n

View project | Download | Jodi Sansone

\n

Challenge of the Week

\n

This week, your challenge is to share one or more examples that demonstrate how lightbox slides can be used in e-learning courses.

\n

Share Your E-Learning Work

\n

\n
• Comments: Use the comments section below to share a link to your published example and blog post.
\n
• Forums: Start  your own thread and share a link to your published example..
\n
• Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
\n
• Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
\n

\n

Last Week’s Challenge:

\n

Before you dive into this week’s challenge, check out the interactive timeline examples your fellow community members shared over the past week:

\n

\n

Interactive Timelines in E-Learning RECAP #315: Challenge | Recap

\n

New to the E-Learning Challenges?

\n

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

\n

Using Lightbox Slides in E-Learning #316: Challenge | Recap

\n

Lightbox slides give course designers an elegant solution for presenting learners with important resources without leaving the current slide. Some of the most common use cases for lightbox slides include:

\n

\n
• Job aids and handouts
\n
• Tables of contents and menu navigation
\n
• Extended resources and reading lists
\n
• Video how-tos and other types of media
\n

\n

How Do Lightbox Slides Work?

\n

Lightbox slides are loaded on top of the current slide and resized to 80% of the original slide. To help learners focus on the lightbox content, the main slide background is dimmed, emphasizing the lightbox.

\n

\n

The best part about Storyline's lightbox slides is that any slide in your course can be used as a lightbox slide. This means any slide in your course (menu, dashboard, quiz results, interaction) can double as a lightbox slide.

\n

There are dozens of practical uses for lightbox slides. Let's look at a couple of examples.

\n

Workplace Learning & Performance

\n

This meet-the-team interaction from Joe Waddington is a fantastic example of how lightbox slides can reuse content across an entire course. 

\n

Each team member profile presents both individual and shared information. Personal info like one's name, job title, bio, and StrengthsFinder profiles are presented on the slide. But the shared info, the StrengthsFinder profile definitions, are loaded as lightbox slides since they're generic descriptions of each strength.

\n

\n

View project | Learn more & download | Joe Waddington

\n

DiSC Insights for Managers

\n

I like to share Jodi's example in my lightbox webinars because it shows how lightbox slides can be used to present content while helping learners remain focused in the moment without jumping out to new slides or scenes. 

\n

\n

View project | Download | Jodi Sansone

\n

Challenge of the Week

\n

This week, your challenge is to share one or more examples that demonstrate how lightbox slides can be used in e-learning courses.

\n

Share Your E-Learning Work

\n

\n
• Comments: Use the comments section below to share a link to your published example and blog post.
\n
• Forums: Start  your own thread and share a link to your published example..
\n
• Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
\n
• Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
\n

\n

Last Week’s Challenge:

\n

Before you dive into this week’s challenge, check out the interactive timeline examples your fellow community members shared over the past week:

\n

\n

Interactive Timelines in E-Learning RECAP #315: Challenge | Recap

\n

New to the E-Learning Challenges?

\n

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

Hi All!

This is my first time taking up a challenge. It will look amateur in front of all the ones posted here because I'm still learning.

I took it up with the purpose of learning from the challenges and from everybody here.

Please do leave your comments on this.

I chose to do a project based on Agatha Christie's famous characters.

Hope you all like it!

https://360.articulate.com/review/content/860b759d-c0e6-4c04-b7d0-ef309b97d905/review

Thank You!

Hi Vaishnavi, welcome to the challenges! Your demo looks well crafted. I especially like the grunge look. Hope to see more designs from you :)

Thank you! :)

Welcome to the challenges and thank you for reminding me how much I like the British actress Zoe Wanamaker.

Thank you! :)

Hey all,
I prefer to create my own lightboxes. Hope my submission is valid
My submission : https://educraft.tech/how-to-use-lightbox-slides-in-e-learning-316/

Nice. The H5P editor offers some very interesting features, thanks for the intro.

It is a useful authoring tool if you can't afford articulate's products. I tend to present it to some clients of mine with limited budget as a decent solution

Super clear content!

Hi! All, my entry for #ELHC 316 Lightbox Slides is a timeline of the digital revolution started by the microprocessor, titled—Microprocessor Digital Revolution. I've tried using a scrolling bar panel alongside the lightbox slides.
Microprocessor Digital Revolution Link: https://360.articulate.com/review/content/1f58ad2a-48f6-4711-b980-488f2901211d/review

Happy Monday everyone!

Here's my submission for this week: https://360.articulate.com/review/content/81f54b48-a2c4-4526-a79c-c488ae0b79d9/review

Alice, Interesting, I did not know Word had an accessibility checker.

I'm loving the clean design. Very cool.

Hi! Here is my project for this week. It's very simple, nothing too crazy. :-)

Demo: https://360.articulate.com/review/content/fbb7d97f-2632-4ead-8b64-52dbdc0796d6/review

Shakis, looks good!

Thanks!

I like it! It's very clean and easy to understand. Sometimes we just need that as learners, right?

This is a slide and lightboxes from an introductory onboarding course I designed and developed. The lightboxes are accessed through hyperlinks found in the marker labels on each of the slide's sub-layers. I wanted to give the learners the option of whether or not to view each of the videos and thought the lightbox option linking to the externally-housed videos was the most elegant solution. (Bonus info: That's me on the base layer narration!)

https://360.articulate.com/review/content/d814cf3c-48bd-4df3-81a0-b6d185c83e54/review

P.S. This is my first submission to these eLearning Challenges, so this is somewhere between exciting and nerve-wracking!

Brian, well done and welcome to the challenges!

Thank you, Daniel.

Nice work Brian. You have a fantastic voice, do you do voice-overs professionally? I like all the different features and giving the user the option of what to look at and when. btw: When I toggle 'accessible text', the text in the information pop-up scrunches up rendering the text illegible—I viewed the module in Firefox browser.

Thank you, Ang. I don't do VO professionally other than what I do for my eLearning projects. Apologies on the accessible text. I didn't plan for that when I developed because it's not required where I work. But it's something I'll explore updating now that I have this out here \"in the wild\".

Very nice, Brian. I like the multiple layers of info leading to the lightbox video. It is great because it applease to several of the social styles. Just the facts for the \"D\", flashy video for the \"E\" and the \"R\"

Thank you, Ron.

With International Women's Day (March 8) a week away, it felt like a good time to incorporate it into a ELH challenge.

Note: I used lightboxes a couple different ways - including an image gallery and that design is totally inspired by Jodi's french bulldog gallery. I had never considered using a lightbox like this before and I enjoyed building it! Thanks for the idea, Jodi!

Link: https://filedn.com/lW9VfynzXDipQ9DNJQQnAom/ELHC316/story.html

Carrie, very cool. There were two series on PBS which you can watch on their website about women's suffrage, one called \"The Vote\" and another based on Susan B. Anthony and Elizabeth Cady Stanton's efforts to the get the vote. The former is a little happier to watch because it actually ends with women getting the vote during the Wilson administration.

Love this, the colours, illustrations and overall design are on point!

I really enjoyed the layout, the information, and the colors. I particularly enjoyed the different pictures of the women that appear one at a time overlapping in the beginning.
Things I noticed:
The lightboxes have two exit buttons. A custom one and the original.
The title slides in really fast
On the major figures slide, Kate Duncker does not have a name under her picture

Jacob, thanks for the feedback! Solid points.
You're definitely right about the double exit buttons. One is generated through the feature in Storyline, and the other is one I added myself. I saw Philippe's note below on the Javascript to remove the automatic exit, so I'm excited to try that in the future.
Good call on the speed of the title slides - I see what you mean.
I'm having trouble replicating the error on Käte Duncker's name tag - may very well be a lag issue from my cloud storage provider. :0
Seriously, thanks for taking the time to review and provide feedback. I appreciate it.

Hi all! Took the lovely lightbox course today as I haven't played with lightboxes before! Threw together this periodic table of elements in order to try all the things I learned today. Note that only Hydrogen, Helium and Lithium and their respective groups are setup to work. I tried the lightbox functionality, creating my own layers to look like lightboxes, and I created navigational controls within my lightboxes to move through the elements in order. I also left the player on, although normally I disengage it, so that's new to me too. I really enjoyed learning something new and seeing the many ways that lightboxes can be incorporated! Thanks!

https://360.articulate.com/review/content/1b8612c0-f366-4854-b14f-5305888285dd/review

Great demo.

This is great. I love the way you built the group colors to highlight when you hover over elements in the table. Smart touch!

Ah, the famous periodic table! Looks great, Jennifer. The colors were great and the lightbox slides were nicely presented. It would be a lot of work to build out the whole table. I wonder at what point the learner would disengage, or if you see this more as a reference tool? I like the nav within the box to move forward through light boxes. Rise actually uses a similar structure.

HI Ron!

I'm a big fan of Theodore Gray's periodic table (https://periodictable.com/ although I have it in app form. It does tend to get overwhelming though, there are just so many of them! I think it would need to be more of a reference tool if it were built out.

Hello Heroes! Here's my lightbox demo for this week :) http://bit.ly/37ZETHU

What I've noticed while publishing is the different display of the lightbox slide when publishing with modern player / without modern player. Thought to share that discovery :)

Love, love, LOVE this--I like the colors too--I lean towards bright colors and love that you do as well! How did you do the animated lightbulb character?

Well done, Alex! Love the vortex effect you incorporated.

Thanks for the feedback, Carrie, happy you enjoyed the vortex vibe :)

Amazing design as usual! :)

Thanks Kimberly :)

Hi all, a simple view of the most common hostiles mobs...

https://360.articulate.com/review/content/8e3ee1c3-98d0-4c89-a927-2578b63f81e8/review

This is awesome! Great use of this technique. I still have yet to learn the glassmorphism technique, but I liked how you used it here.

Thank you Jennifer

I adore this example! Brilliant subject choice for the challenge and well-executed.

Thanks Carrie

Looks good. I like the glassmorphism within the lightboxes. Cool!