I think both your questions are related to each other (at least by the root cause).
The main difference between your 'JBGallery.html' page and your 'JBGallery1/index.html' page is that your 'JBGallery1/index.html' page locks the viewport (with the following line of code):
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
... whereas your 'JBGallery.html' page does not.
This results in the gallery being expanded from the Splash Page differently on the two embedding pages.
From 'JBGallery.html', the gallery is expanded on a new page of its own.
From 'JBGallery1/index.html', because the viewport is locked, the gallery is expanded on top of the embedding page.
(Please see the Expand Gallery Behavior support section for details.)
This explains the difference between the two pages but not why the galleries expand with different layouts.
Unfortunately, the problem seems to be due to a known bug (whereby the page that the gallery is expanded into has a bearing on how the gallery is displayed) that the developers are aware of but have not yet been able to fix.
Until the bug is fixed, possible workarounds are as follows:
(1) Set showSmallThumbsOnLoad="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).
(2) Remove the viewport lock from your gallery pages.
I have sent a further note to the developers regarding this problem.
Thank you for reporting the problem and apologies for any inconvenience caused.
Hopefully one of my suggested workarounds will work for you until the bug is fixed.