Forum Discussion
STORYLINE LIGHTBOX BACKGROUND (MODERN PLAYER) NOT TRANSPARENT
Hello all,
I would like to know if it is possible to use the lightbox functionality and make the slide background of the lightbox 100% transparent. We don't want custom made because of certain reasons. The background keeps appearing of the slide itself opaque no matter what settings I try in the format background panel. It will not be transparent at all, also by trying changing this in the masterslide decks makes no difference. I've attached a screendump of what happens cq what I need. (photoshopped it).
Please let me know if it's possible. It influences our design decisions at this point so any decisive answer would be nice.
Kind regards and thanks for your answer in advance.
Judith
53 Replies
Hi, Marion!
Other members might not be subscribed to this discussion, but you're welcome to contact them directly through their profile by clicking on their name and selecting Contact Me.
Hello everyone, its now some years later and some of the old links don't seem to work anymore. is there a new solution to getting the lightbox background transparent?
finally got it working by copying the code from Russell's "Lightbox_Transparent_Background.story" file, which seems to be different to the other code people say work. So who knows, but glad got it working
Hi Mark, unfortunately I can't open the story file you are referring to anymore. Would you be willing to share the code you used to make the background transparent? All the codes shared in previous posts did not work for me (neither when inserted on Master slide or on the lightbox slide itself.)
Hi Miriam,
Try this:
1. Create a base slide where you launch the light box.
2. Create another slide that will be the light box.
3. Set the background color of the light box slide to Fill Color (pick any), and drag the transparency all the way to 100%.
4. Add the following in the light box slide as a JavaScript trigger when the slide timeline starts:
document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"
document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 0)"
document.getElementById('light-box-wrapper').style.background="none"
Here's an example: https://360.articulate.com/review/content/d58c7b60-d4e6-447c-b6d8-79696568620d/review
Bonus info: with a lightbox, Storyline saves your suspend data in the LMS. This has nothing to do with the transparency but good to know. For example, if build a game and you're staying a single slide and you gain score, the LMS will not remember it until you leave the side. OR you show something on a lightbox.
Hi, fairly new to storyline after spending years with captivate.
Could someone please explain to me where these java triggers need to go/how to be triggered. I can't for the life in me get them to work.
I've tried both
document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"
and
$(".lightbox").find("rect[id^='slide-bg']").hide();
using - execute javascript, when the timeline starts on this slide
and I've tried these on both the slide that is the lightbox and the master slide for that slide.
Neither have worked.
I'm trying to create a universal support slide for our courses (triggered from a support option on the player) have I done something wrong with the script or is it not supported when triggered from the player.please help
Hi folks, I've been trying to get this to work in a project I'm currently working on. I've managed to get it working with Russel's approach, but I haven't been able to get rid of the brief moment of background before the JS trigger removes it. I can't edit the HTML files directly for reasons. Can anyone point me in the right direction?
As some extra info on Zsolt's approach...
If you want the backgroundColor of the overlay element partially transparent..
the a in rgba stands for alpha... ranging from 0 to 1..
So...document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 0.5)"
gives you a 50% transparant overlay.I have a lightbox where I needed to make the background transparent, hide the lightbox wrapper, and also adjust overlay color/transparency around it (that I used for a fading effect).
I put these in a JavaScript trigger on the lightbox slide master layout. You don't need all of these, you can play around each of them and see the result. Using this was easier than editing the output html every time. It's important that these are on slides used for lightbox only because it assumes you have these elements on the page. I also added a trigger on the masterpage for Escape. When the user presses Escape on a lightbox, it closes. Much friendlier than mousing or tabbing to the X.document.getElementsByClassName('lightBoxSlide')[0].style.backgroundColor = "transparent"
document.getElementsByClassName('visible-overlay')[0].style.backgroundColor = "rgba(255, 255, 255, 1)"
document.getElementById('light-box-wrapper').style.background="none"
Hi Zsolt
Thank you very much for the solution. It works but I seem to have a black border on the lightbox that I cannot get rid off. Do you perhaps know of a code that can help with the problem.Thanks for this solution Zsolt. It worked perfectly for my needs. :-)
Hi Kris,
Correct, the code doesn't go into Storyline directly but needs to be inserted into the story.html file after you have exported the project.
To do that, you can open the story.html with a text editor of your choice and then add the following code to the <head> of the html file:
<style>
.visible-overlay{background-color: transparent !important;}
</style>I hope this helps!
Cheers,
Stephan
HI Jannis,
For the following code that was included by @Russell Killips above, it does not go into SL directly?
.visible-overlay{background-color: transparent !important;}
Just wanted to jump in to thank everyone who has contributed to this. Took me only a few moments to find the answers I was after when I searched and the solutions above work beautifully!
