Your Juicebox gallery has dimensions of 100% x 100% and is loaded as soon as the page is loaded.
However, when the page is loaded, the gallery's parent container is not visible on screen so the gallery's dimensions are 100% of a zero-sized container.
Try giving your gallery fixed dimensions such as:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: "juicebox-container",
galleryWidth: "800",
galleryHeight: "600",
backgroundColor: "rgba(34,34,34,.5)"
});
</script>
<div id="juicebox-container">Otherwise, delay the loading of your gallery until the gallery's parent container is visible on screen (and has dimensions which Juicebox can use to calculate its own size).
Put the Juicebox embedding code in a function and run the function to load the gallery when the HTML element is clicked.
For example:
<script src="jbcore/juicebox.js"></script>
<script>
function loadGallery() {
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,.5)"
});
}
$(document).ready(function() {
$('#page2').click(function() {
loadGallery();
});
});
</script>
<div id="juicebox-container">Hopefully one of these two suggestions will help.