1 Topic by Ann (edited by Ann 2025-05-11 00:01:48)

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Topic: "Uncaught ReferenceError: juicebox is not defined"

Steven:

I have run into a major problem: my web site makes extensive use of Juicebox Galleries and none of the most recent ones will display on my browsers.
(Old galleries are fine but the trouble lies with newly-created Galleries.)

I am using an M1 Mac running on Sequoia; and I use iPower.com to host my site.

The worrying message from Firefox is:
"Uncaught ReferenceError: juicebox is not defined
    <anonymous> https://www.shelbourne-america.net/SunB … ex.html:27
index.html:27:2"

Have you had any dealings with iPower.com?

They were recently acquired by new owners but I have had my site with them for many years without any problems.

Do they need to "define Juicebox" or does JB need a new Script?

Or do I need to fix anything at my end?

I also see this: "Juicebox js: An error occured trying to load resource"

Please advise!

Ann

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

Re: "Uncaught ReferenceError: juicebox is not defined"

Check out this gallery as an example: https://www.shelbourne-america.net/SunB … index.html

The gallery's 'juicebox.js' file should be located here: https://www.shelbourne-america.net/SunB … uicebox.js
... but going to that location directly in a browser results in an error 404 (file not found).

It looks like your gallery's 'juicebox.js' file is simply not present on your web server. (This would account for the error message you've been getting, too.)

Try re-uploading your gallery and make sure that its 'jbcore' folder is complete.

This should hopefully resolve your problem.

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Re: "Uncaught ReferenceError: juicebox is not defined"

Steven:
Thank you very much for your prompt response.

This  is a very interesting finding because I loaded that very gallery into iPower.com, through FileZilla, and it shows as being loaded into "public_html" there which is where I believe they load websites.

I will open a conversation with iPower and see what goes on!

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

Re: "Uncaught ReferenceError: juicebox is not defined"

I hope you get on OK.
You could try re-uploading your gallery before contacting your web host (in case something happened during the original upload resulting in missing files). This might be enough to resolve your problem.
However, if this does not help, then maybe your web host could shed some light on things.
Just for the record, it looks like the entire jbcore folder is missing. Maybe it has been uploaded to a different location and the path to the juicebox.js file in your gallery's embedding code needs to be adjusted? Just a thought.

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Re: "Uncaught ReferenceError: juicebox is not defined"

The jpcore was apparently loaded — but when i opened it I found it had no contents! 
That may be the clue to the mystery?

I will let you know what I discover but at least I know now that Juicebox is not the culprit.

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Re: "Uncaught ReferenceError: juicebox is not defined"

Update:
It appears that the latest update of FileZilla Pro may be stripping the contents of fbcore (and possibly config as well) when I use it to upload new Juicebox galleries to iPower.
If I upload them directly from Dreamweaver, the galleries seem to load at iPower.com with all of their dependents.

There is a minor problem with the JB Java Script component but it may not matter?

The error is in line 14:

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while

The semi-colon before "while" is apparently not needed?
When I remove that semi-colon, the error goes away.

I will let you know if I discover anything else.

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

Re: "Uncaught ReferenceError: juicebox is not defined"

Strange... I've just used Filezilla 3.69.1 to upload a test Juicebox gallery folder to two different servers and all the files (including the ones inside the 'jbcore' folder') were copied successfully.
Maybe there's a setting in your Filezilla preferences that is preventing files in subdirectories from being transferred. It's worth checking 'Edit -> Settings' (Windows) or 'FileZilla -> Settings' (Mac) to see if there is anything there that might be causing your problem.

There is a minor problem with the JB Java Script component but it may not matter?

This is just informational rather than an actual warning or error. It's nothing to worry about.
An extra semi-colon in JavaScript (denoting the end of a line of code) will just be ignored by all browsers.
I guess the packing program (which minimizes the source code into the 'juicebox.js' file that you see) just errs on the side of caution and leaves the semi-colon there.

8 Reply by Ann

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Re: "Uncaught ReferenceError: juicebox is not defined"

Steven:
Thank you for your reassuring comments about that extra semicolon in JavaScript.

I have found another error which may be stopping SFTP from loading the theme.css properly.

There is a HTML coding error in the Juicebox jbcore/theme.css.
The fault is in lines 200, 201, 202 and 1181.
(See first image)

/Users/ann_/Desktop/Screenshot 2025-05-17 at 9.08.06PM.png

I have made the corrections myself in the Juicebox jbcore theme.css file for each Gallery; and the JB Galleries have now all loaded correctly on the iPower.com server and are displaying from my website.
Fixing this code does seem to matter when the gallery is part of a folder that is part of  a website.

If anyone else runs into problems with JB Galleries not loading in websites, correcting this may help.

Post's attachments

Screenshot 2025-05-17 at 9.08.06 PM.png
Screenshot 2025-05-17 at 9.08.06 PM.png 111.48 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

9 Reply by Ann

  • Ann
  • Member
  • Offline
  • Registered: 2017-10-03
  • Posts: 51

Re: "Uncaught ReferenceError: juicebox is not defined"

This shows my edits:

Post's attachments

Screenshot 2025-05-18 at 2.53.47 PM.png 87.34 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,956

Re: "Uncaught ReferenceError: juicebox is not defined"

I have found another error which may be stopping SFTP from loading the theme.css properly.

I doubt that any errors in a file would prevent a file from being uploaded (via FTP or SFTP). Filezilla (for example) does not check files for style or syntax errors. it just uploads what it's given.
Likewise, I doubt a web server would check files for problems. If a file had any errors in it, the first anyone would likely know about it is if the file is opened in a browser (and then the browser could potentially choke on the error).

There is a HTML coding error in the Juicebox jbcore/theme.css.

It's not really an error. It's just three lines of CSS code which contain browser-specific prefixes (so that the 'transform' can be performed in all browsers).
Any line of CSS code that is not recognised by a browser might be flagged with a warning (by the browser) but the browser ought to just ignore the line of code that it does not understand and then carry on parsing the file.
These days, all major browsers should recognise 'transform' and so the code now could be replaced by:

.jb-idx-thb-list .jb-idx-thumb img:active {
    transform: translate(2px, 2px);
}

... or, for backwards compatibility with older browsers:

.jb-idx-thb-list .jb-idx-thumb img:active {
    -webkit-transform: translate(2px, 2px);
    -moz-transform: translate(2px, 2px);
    -o-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
}

I'm not sure that your solution is best as it's not actually valid CSS.
Try entering the original code into the W3C CSS Validation Service and you'll see that the code is valid.
However, try validating your code and you'll see errors reported.

I'm really not sure why your gallery is not loading with the untouched CSS file. As I mentioned above, I think it's more likely to be your browser that your FTP/SFTP program or web server. What browser and version are you using?

However, if for whatever reason your browser does not like the original (valid) CSS code, try:

.jb-idx-thb-list .jb-idx-thumb img:active {
    transform: translate(2px, 2px);
}

... instead. It should work just fine (in a modern browser).