So the juicebox code is not only on the interiors.html page, but it is also on the gallery3 index.html page.
Does the new code go in BOTH locations?
At the moment on your web site, the embedding code is in both pages.
However, the gallery's own 'index.html' page is required only if you want to view the gallery on a page of its own (or if you want to load the gallery into an iframe).
As you are embedding the gallery into an existing page alongside other content, the gallery's own 'index.html' page is redundant and can actually be deleted from your web server if you like.
I am going to replace that with the new code you gave me, but my question is "why is the juicebox-container div underneath the actual code and not "holding" the juicebox script and code? Could this be part of the problem?
There is no need to replace the code in the gallery's 'index.html' file (see above). Just change the URLs in the embedding code in the 'interiors.html', 'exteriors.html' and 'projects.html' pages.
The JavaScript code tells Juicebox to fill the 'juicebox-container' <div> with the gallery. The JavaScript code should be outside the 'juicebox-container' <div>.