Re suggestion 1, I don't really understand it.
Suggestion #1 was essentially to move the position of the gallery's embedding code from the <head> section of your web page to below the Juicebox containerId div, ie. change:
<!DOCTYPE html>
<html lang="en">
<!-- saved from url=(0014)about:internet -->
<head>
<meta charset="UTF-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
<script type="text/javascript"><!--//--><![CDATA[//><!--
new juicebox({
backgroundColor: "rgba(51, 51, 51, 1.0)",
configUrl: "config.xml",
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%",
themeUrl: "res/juicebox/jbcore/classic/theme.css"
});
//--><!]]></script>
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body
{
background-color: #333333;
margin: 0;
}
body, html
{
overflow: hidden;
}
/*]]>*/--></style>
<title>Victory Powerlet in Side Cover</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
... to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
<style type="text/css">
body {
background-color: #333333;
margin: 0;
}
body, html {
overflow: hidden;
}
</style>
<title>Victory Powerlet in Side Cover</title>
</head>
<body>
<div id="juicebox-container"></div>
<script type="text/javascript">
new juicebox({
backgroundColor: "rgba(51, 51, 51, 1.0)",
configUrl: "config.xml",
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%",
themeUrl: "res/juicebox/jbcore/classic/theme.css"
});
</script>
</body>
</html>
My reasoning was that if Juicebox cannot find the specified containerId, then this implies that:
(1) The Juicebox embedding code must have been run (for it to look for the containerId), and...
(2) The containerId cannot be found on the page, perhaps due to a timing or server issue resulting in the entire page not being loaded and the containerId not being included in the DOM.
Juicebox should load itself into the containerId only when the document is ready and the DOM is complete.
However, placing the embedding code after the containerId div in your web page should ensure that you do not run into the Cannot find div with id: "juicebox-container" error message as the containerId will already have been included in the DOM when the embedding code is run (although if the root problem still exists and the page fails to load correctly for whatever reason, then the gallery may still not display).
Your inconsistent results make me think that the problem may lie with your web server or internet connection.
If the code on your web page does not change and your browser remains constant, then the gallery should load each and every time.
Essentially, the only two variables in the equation are your web server and internet connection.
As I am able to view your gallery in all browsers and have not yet seen the error message you report, then this suggests that your web server is OK and that your internet connection may be a possible cause.
Try my Suggestion #1 above to see if this helps.