• Registered: 2017-06-06
  • Posts: 3

Topic: Button Bar icons appear as broken links

I purchased juicebox pro and I am using it in conjunction with Drupal 7 (7.x-2.1). I was able to install everything without any issues and overall the module works except for one issue. None of the button bar icons appear on the gallery (everything from the forward and back buttons included with the lite version to more complex features like social sharing buttons included with the pro version).

I have added a screen grab of exactly how the icons associated with the button bar appear. The functionality works with each button (etc...you can click on the navigate buttons and the previous or next image appears, you can expand images, social share websites appear when clicking on the button).

I placed the font files (extracted from the jbcore folder) to the following, which was recommended by Drupal community -

\sites\all\libraries\juicebox\classic\fonts -

The folder includes the 4 files that are required including the TrueType font file.

I was wondering what could be causing this issue. I have cleared browser cache and Drupal cache

Thanks

Post's attachments

juicebox.png 441.41 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Button Bar icons appear as broken links

I placed the font files (extracted from the jbcore folder) to the following, which was recommended by Drupal community -

\sites\all\libraries\juicebox\classic\fonts -

That sounds correct. The module's documentation (Step #3 on this web page) states that you should copy the entire contents of the 'jbcore' folder to your /sites/all/libraries/juicebox/ directory. You should not need to find the font files specifically, though: just upload the entire contents of the 'jbcore' folder to your /sites/all/libraries/juicebox/ directory, keeping the 'jbcore' folder structure intact, and the font files should be uploaded (along with all the other resource files that Juicebox needs) to the correct location on your web server.

The problem is likely to be caused by one of the following:

(1) Please double-check that the font files are present in the correct location on your web server. Even if you find that they are where they should be, try re-uploading them in case something happened during the initial upload which has somehow resulted in corrupt files.

(2) A browser setting or extension might be causing the problem. Try viewing your gallery in a different browser (Edge, Firefox, Internet Explorer 11, Opera, Safari) to see if this makes a difference. If the icons appear OK in a different browser, then try temporarily disabling all extensions in your Chrome browser to see if this helps.

(3) Check that there are no global CSS font rules on your web page which might be setting a custom font for all elements which is overriding Juicebox's own icon font.

(4) A further cause of your problem might be incorrect or missing MIME types for the font files on your web server.
If this is the case, then you may have to contact your web host to ask if they can add the font file types (.eot, .svg, .ttf, .woff) to the list of known MIME types (so that browsers know what to do with them).

If you continue to experience difficulties, I'd be happy to help further but I'd really need to see the problem live on your web server (to at least try to determine whether the problem is server-side or client-side) but I notice that your gallery is currently password protected.
I hope that my notes above point you in the right direction but if you need any further assistance and are happy for me to view your gallery, please let me know and I'll send you an email where you can send me your web page's login details.
Thank you.

  • Registered: 2017-06-06
  • Posts: 3

Re: Button Bar icons appear as broken links

Thank you for the prompt reply.

Regarding point 3 that you made - we are using an Adobe script on the site that applies a specific font family on the site. Is this an example of a global CSS rule?

Also, we are testing the gallery on a staging server and not one that is public. Could this be affecting the gallery?

  • Registered: 2017-06-06
  • Posts: 3

Re: Button Bar icons appear as broken links

I wanted to add one more note about the issues I am having about the button bar icons not appearing.

I am not sure if this is related or not but when viewing an example on mobile - iphone 7 - I can see some icons. I am not sure if these are part of the font files that are uploaded with the juicebox module or not. Just wanted to include it as we troubleshoot.

I have included a screen grab

Thanks

Post's attachments

IMG_6360.PNG 579.75 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.
  • Registered: 2012-04-24
  • Posts: 5,924

Re: Button Bar icons appear as broken links

Thank you for providing the screenshot.

Regarding point 3 that you made - we are using an Adobe script on the site that applies a specific font family on the site. Is this an example of a global CSS rule?

It could be, depending on how the CSS rule is applied. If it applied to only certain ids or classes, then things should be OK but if it is applied to all elements on the web page (being applied to * or the html or body tags), then you might run into problems with the gallery inheriting the font, although I can't actually override the Juicebox font myself by doing something similar (see below).

Also, we are testing the gallery on a staging server and not one that is public. Could this be affecting the gallery?

This is likely to be a factor only if there is a problem with the font MIME types on your staging server.

I am not sure if these are part of the font files that are uploaded with the juicebox module or not.

The icons in the screenshot are not part of the Juicebox font and I do not know where they are coming from. I've never seen the Juicebox font get hijacked like this before.
I can't even override the font myself by adding CSS code such as the following to a gallery's web page:

*, html, body, #juicebox-container {
    font-family: Courier !important;
}

The icons still display fine in my own test gallery, even with the code above in place.

In order to troubleshoot the problem further, please try the following.
(1) Create a sample gallery with JuiceboxBuilder-Pro (the desktop application which comes with Juicebox-Pro).
(2) Upload the complete gallery folder to your web server.
(3) Open the gallery's 'index.html' file (inside the gallery folder) to view the gallery on a web page of its own.

If the icons all display fine when you view the test gallery on its own 'index.html' page, then there is no problem with your server and the problem lies somewhere within the code on your other gallery's web page.
If the icons do not display fine in the test gallery, then there is likely to be a problem with the font MIME types on your server.

This should at least point you in the right direction and be one step closer to reaching a solution.

You could also use your browser's developer tools (F12) to try to figure out what custom CSS code on your web page might be overriding the gallery's own font.