Lightbox issue with HTML5 output
May 29, 2013
Hi all,
We have recently discovered an issue with HTML5 output which effects the in-built lightbox feature.
I built what I thought was a pretty nifty glossary which opens as a lightbox slide, allowing me to create each entry as a separate slide as opposed to having dozens of layers. Works perfectly in Flash, however as HTML5 output, the lightbox opens at what seems to be a fixed portion of the slide instead of shrinking the whole slide down to fit (have tried with several different slide proportions, all with the same effect). It seems to include only the top left two-thirds of the slide.
Anyone got any ideas? I've tried a few goofs to try and convince it include the whole slide but nothing appears to help. Issue occurs in Chrome, Safari and Firefox.
I can send a test file, but you can probably create one yourself in about 10 seconds.
25 Replies
Hey Greg, welcome to the community!
Can you first make sure you're running the most current update of Storyline - Update 3.
It looks like we last saw this issue prior to the release of Update 2.
You'll also want to be sure you're following some basic rules to prevent strange behavior:
In the meantime, I'll try to recreate what you're describing in case it's reappeared...
Thanks!
Hi Peter,
Thanks for the response.
I can confirm we are using Update 3.
The project I originally noticed this on was not stored locally, however subsequent testing projects were and they all behave the same way. Will test with a super short directory path later today. Please let me know if you'd like me to submit a test project.
Thanks, Greg.
Yeah, I wouldn't be surprised at all if you experienced strange behavior on the original non-local file - that definitely causes some strange things to occur.
I wasn't able to replicate it on my end in any of my tests, so if you continue to see it as an issue, we'd love to learn more about what might be going on, so please do share the .story file at that point.
Thanks, Greg!
Hi Peter,
I have created a test file and submitted it using the link above. Didn't want to send the original project as the file is huge. This one experiences the same issue though. I created an object on the lightbox slide that is exactly 50% of the total slide height & width. As you will see, the lighbox is cutting off the bottom and right side of the slide.
I have tested this one and the original project, operating and publishing to C:/folder/project and even C/:project to rule out that as a potential issue.
Just to clarify, this issue occurs when I choose story_html5.html when viewing the package offline. I have not tested it running in an actual LMS but I'd expect the same behaviour.
Thanks, Greg.
We received it and Jonathan is taking a look now. He should be contacting you soon.
Ah, was there any update to this. I am having the same issue with the lightbox in html5.
Hi Darren,
From what I can see in Greg's case, it looks like the issue may have been browser-related. What web browser are you using? Have you tried using a different browser?
For example, if you're viewing HTML5 content, I would recommend using Google Chrome. Can you try that out and let us know if you see any improvement?
Thanks!
Thanks for your attention Christine. I have managed to download Google Chrome at home, and yes it works! Hmm. Unfortunately our IT department will not support Chrome, so the only option I can see is to avoid lighboxes, and always use layers.
Hi All,
Just to chip in here....
I experienced the same issue with a course a while ago.
The in-bulit lightboxes launched but only showed a portion of the slide or they launched without an exit 'X' button so could not be closed. I experienced this problem in IE, Chrome, Firefox and on Ipad using the Articulate player. However, when I submitted the case my tech support guy at Articulate could not replicate the issue. (All my pc settings were correct/ security settings correct/ working from local drive).
In the end I created 'fake' lightboxes using semi transparent black overlays on the base layer.
However, if anyone does figure out how to resolve this issue I'd be very happy to hear about it, for future courses.
I am having the same problem with lightboxes in IE and FireFox but not in Chromoe. However, web objects don't work in Chrome. Also, slide transition in IE and Firefox is very slow. Not so in Chrome. Will not publishing in HTML5 fix all this?
Hi Yvonne,
Since it sounds like you have a few things happening across multiple browsers it may be best to have you submit a Support case so that we can look at the file that is causing so many issues.
A quick work around would be to open the page as normal, instead of in a lightbox,
and use the 'jump to slide', 'previous slide' trigger to return the user to their original slide.
Thanks Julie for sharing your sample story here.
I am experiencing the exit 'X' button being cut off and not appearing when viewing a light box on my iPhone. Once the light box opens, there is no way to close it. However, the light box works great in IE10 and Chrome. I did not publish this for the iPad player -- just published with HTML5.
Hi Mark,
Are you viewing this within mobile Safari? You may find that Articulate Storyline HTML5 content is too large to fit in mobile Safari on devices running iOS 7.
This is a known issue. We're working to fix it in a free software update for Storyline. In the meantime, we recommend viewing the course in one of these environments:
Thanks Ashley (and sorry I didn't see your reply before tonight). I stopped using lightboxes and used the "jump to slide" as Julie Wynn suggested (thanks Julie!). I haven't tried any lightboxes since Update #4 -- did that maybe fix the display issue in mobile iOS 7?
Hi Mark,
If Julie's suggestion works for you, I'd stick with it - no reason to rock the boat if you don't have to. In regards to update 4, there were update regarding HTML5 and iOS7, and the full release notes are detailed here.
Resurrecting this thread: I had a navigation guide lightboxed to start when the timeline starts on my first slide. Due to Firefox issues, I thought I'd try Julie's suggestion. I set up a trigger on the "faux lightbox" slide, where when you click the X you go back to the previous slide (my first slide). What I'm running into, though, is that when I go back to my original slide, it launches the "lightbox" slide again. Do I have a funky setting somewhere?
What I would like is for the "lightbox" slide to only come up the first time, even if you go back to that slide from elsewhere in the project. I only need them to see the navigation guide once, but I want it linked to the player.
Hi there Katie,
Are you able to post your .STORY file here, so we can take a look at what you already have so far? If the file's not too large, you should be able to attach it to your response. This would make it a little easier for us to see if there's just a trigger missing, etc., and not an issue with HTML5.
Thanks!
I seem to have fallen victim to the "unable to close lightbox" issue. I was running update 3 but have just updated to 5 and that's solved most of the display issues I was having but I'm stuck with this lightbox problem.
Everything works as expected but as soon as the HTML5 output is viewed on an iPhone (iPad is fine) the lightbox opens but opens very large with the screen focussing on what I think is the dead centre of the lightbox.
If you flip the iPhone between portrait and landscape orientation (and you're quick enough!) you can just about see the lightbox does scale correctly and does load at the right size for a split second (and you can see the red 'x') but then reverts to being huge.
I cannot scroll to find the red 'x'. Zoom seems to have been disabled so I can't zoom out. The only way to close the lightbox is to reload the entire URL and start again.
I'm currently running a trial version to prove the software to people who may purchase it. Trial expires soon - help!
Thanks Paul for sharing that here - and I see where you're working on this in a case with John Say and he's reported it to our QA team. I'll attach this thread to the QA report so that we can update both places if further information becomes available.
Thanks Paul - I see the issue is open with our QA team and they'll be the one who will investigate the cause behind it so I don't have any further information to share at this time.
I'm having this issue also with a link I built to a lightbox from the player menu.
Any solutions yet?
Hi Mike,
Unfortunately I don't have any further information to share, but this issue is still with our QA team for review. I'm not sure if Paul is subscribed to this thread, but you may want to reach out to him directly and see if he was able to determine a fix by modifying the published output.
This discussion is closed. You can start a new discussion or contact Articulate Support.