• Registered: 2017-08-04
  • Posts: 2

Topic: Embedding working in Chrome but not Explorer or Safari [SOLVED]

Hi

I  followed the example to embed galleries into a single webpage.
It works great in Chrome (cornfeld.org/SummerVacation2017).

In Safari on iPad and Explorer on my PC I get the following error:
Juicebox Error: Cannot find div with id: "JacksonLake"

Any thoughts a to why this might be?

Thanks

Dan Cornfeld


The index.html file is below

<html>
<head>
<script src="./jbcore/juicebox.js"></script>
</head>
<body>
<script>
  new juicebox({
    baseUrl : 'JacksonLake/',
    containerId : 'JacksonLake',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
</script>

<script>
  new juicebox({
    baseUrl : 'Chuckwagon/',
    containerId : 'Chuckwagon',
    galleryWidth : '800',
    galleryHeight : '600',
    backgroundColor: '#222222'
  });
</script>

July 26, 2017. Chuckwagon Dinner<br>

<div id="Chuckwagon"></div>
<br>


July 27, 2017. Jackson Lake and Coulter Bay<br>

<div id="JacksonLake"></div>





</body>
</html>

  • Registered: 2017-08-04
  • Posts: 2

Re: Embedding working in Chrome but not Explorer or Safari [SOLVED]

I solved the problem.
The script had to be AFTER the body of the page.
Sorry to bother everyone.

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

Re: Embedding working in Chrome but not Explorer or Safari [SOLVED]

I'm glad you've been able to resolve your problem.
Thank you for letting me know.

However, the <script> tag loading the 'juicebox.js' file can be in the <head> section of your web page (just as long as it is above the 'new juicebox' code).

I've tried to replicate your problem using exactly the same code that you posted (and the same gallery structure with the same gallery folder names) and the problem seems to be due to a couple of things:
(1) Your web page does not contain a Doctype Delcaration so the browser being used to view the gallery does not know what set of standards the code on your web page should confirm to.
(2) Your <div> 'id' (and corresponding 'containerId') starts with an uppercase character.

If you add the HTML 5 Doctype Declaration (<!DOCTYPE html>) at the very top of your web page (before the opening <html> tag), then the 'id' starting with an uppercase character should not cause any problems. (Some browsers will be more tolerant towards errors than others which is why your web page works in some browsers but not others.)
Otherwise, you could just start your 'id' (and 'containerId') with a lowercase character (but your web page should really contain a valid Doctype Declaration which should solve your problem, as least it does in my own test scenario).