Topic: Missing icons when using an external jbcore folder [SOLVED]

When I use something like

<script src="/path/to/my/jbcore/juicebox.js"></script>

everything works fine, but the icons for "Hide Thumbnails", "Open Image in New Window" as well as the left and right arrows to switch between images, are missing. There are just some small rectangles with indications of hex codes displayed instead (like what you see when a UTF-8 glyph is missing).

Is there something else that needs to be adjusted if I want to use a jbcore directory from a central location?

Klaus

Re: Missing icons when using an external jbcore folder [SOLVED]

The icons within a Juicebox gallery are characters in a custom font and the font files are stored in the 'jbcore/classic/fonts/' folder.
As long as your 'jbcore' folder is complete and is located on the same domain (and subdomain) as the gallery's web page, then all should be well.
Please double-check that your 'jbcore' folder is complete (especially with regard to the font files in the 'jbcore/classic/fonts/' folder).
If necessary, try reuploading the 'jbcore' folder to your web server and clear your browser's cache before reloading your gallery's web page.

Other possible reasons for the problem may be:
(1) Missing font files in the 'jbcore/classic/fonts/' folder (see above).
(2) Incorrect or missing MIME type entries in your server configuration.
(3) Restrictive permissions for the font files in the 'jbcore/classic/fonts/' folder. Default permissions of 755 for folders and 644 for files should be fine. You should be able to check and change permissions with a dedicated FTP program such as Filezilla or via your web hosting account's online file manager.
(4) Custom CSS overriding Juicebox's own font (used for the icons). Check to see if you have any custom CSS on your gallery's web page which might be interfering with Juicebox's own font settings.

Hopefully this will help.
However, if you continue to experience difficulties, please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further.

Re: Missing icons when using an external jbcore folder [SOLVED]

I am currently working locally, directly loading the files into the browser.

The problem can be (at least here ;-) easily reproduced:

- Expand the juicebox_pro_1.5.1 archive into any directory.
- Load the example web/index.html and it works.
- In a shell, change into the "web" directory.
- Now do
  mv jbcore ..
  and change the line
  <script src="jbcore/juicebox.js"></script>
  in index.html to
  <script src="../jbcore/juicebox.js"></script>
- Reload index.html and see the missing icons.
- Now change the above line in index.html to
  <script src="abc/jbcore/juicebox.js"></script>
  and do
  mkdir abc
  mv ../jbcore abc
- Reload index.html and the icons are there.

So it looks like it always works if the jbcore directory is somewhere below the web directory, but not if it is above it.
Shouldn't this always work, no matter where the jbcore directory is located?

Klaus

Re: Missing icons when using an external jbcore folder [SOLVED]

I see the problem you report but only locally and only in Firefox.
The test gallery (using <script src="../jbcore/juicebox.js"></script>) works fine (displaying all icons as expected) once it has been uploaded to a web server.
Additionally, the same test gallery works fine locally in Edge.

It looks like the problem is due to a local file restriction (related to the same-origin policy) in Firefox.

In this Buzilla bug report, there seems to be some debate over whether this is intended behavior (see this post) or a bug (see this post) but, either way, it certainly seems to be unique to Firefox.

One workaround is to go to about:config (in the Firefox address bar) and change security.fileuri.strict_origin_policy from its default value of true to false. (It works for me.)
(Please note that you should relax your browser's security restrictions at your own risk.)

Otherwise, try previewing your gallery locally in Edge (or Safari) or upload your gallery to your web server where all features that do not function locally (such as the Download Button, Expanding in a New Page, the Fotomoto Shopping Cart and Password Protection) will all work fine.

Re: Missing icons when using an external jbcore folder [SOLVED]

Thanks, that did it.
If it all works fine once on the web server, this is OK for me.

Klaus

Re: Missing icons when using an external jbcore folder [SOLVED]

That's great! Thank you for letting me know.