• Registered: 2013-04-21
  • Posts: 2

Topic: Bugfix: left-right navigation buttons are not displayed correctly

Hi,
I just found a bug that occurred when I inserted a juicebox on a webpage that sets the css font-family property to anything else than inherit. The overlay left/right navigation were not displayed correctly, only UTF8-placeholders were shown.
In order to fix it, I edited jbcore/classic/theme.css in the exported juicebox and inserted

  font-family: 'juicebox';

into the properties of
.jb-navigation .jbn-left-button
and
.jb-navigation .jbn-right-button

I suggest that this fix is included in the next version of Juicebox...

Best,

Candyandy

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Bugfix: left-right navigation buttons are not displayed correctly

Thank you for reporting this but I have so far been unable to replicate the problem you have described (using Juicebox-Pro v1.3.0).
Please post the code of a simple test case or post the link to a gallery which demonstrates this behavior so that I can investigate further.
Thank you.

  • Registered: 2013-04-21
  • Posts: 2

Re: Bugfix: left-right navigation buttons are not displayed correctly

Sure, I uploaded a version with the bug to this URL: http://www.ekb-kochen.de/temp/

In order to reproduce the bug, I generated an arbitrary juicebox using Juicebox Lite 1.3.0. Then, I set the font-family css property in line 18 of index.html: 

 * { font-family:  Arial, Helvetica, sans-serif }

As a result, the left/right arrows do not show properly anymore. Browsers used: Firefox 20.0.1, Chrome Version 26.0.1410.64 m, and Opera 12.15. By the way, the three browsers all show different characters for the left/right buttons, but all are wrong. The bug can be fixed as described in my earlier post.

If you still cannot reproduce it and cannot see the error in the posed example juicebox, I can supply screenshots of the error on your request.

Best regards!

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Bugfix: left-right navigation buttons are not displayed correctly

In my own test gallery, I was setting the 'font-family' in the 'body' tag, e.g.:

body { font-family:  Arial, Helvetica, sans-serif }

In doing so, the problem you reported does not arise.
Also, using the * wildcard to set the 'font-family' will override the galleryFontFace configuration option.

Thank you for reporting the issue. I have notified the developers.

  • Felix
  • Juicebox Support Team
  • Offline
  • Registered: 2012-04-24
  • Posts: 173

Re: Bugfix: left-right navigation buttons are not displayed correctly

FYI - By using the * selector you are pretty much guaranteed to over-ride and possibly break any 3rd party HTML widgets loaded into your page. This is because there is no way to 'sandbox' CSS, i.e. create a separate protected namespaces.