@greg
The javascript idea is most elegant, but it is awkward to have people .click or touch the empty screen to get the gallery to load.
This is not necessary. You would attach the click handler to the button that the user would click to reveal the gallery so that it all happens automatically (without a further click required once the container is visible on screen).
Just give the button a unique id and use this as the jQuery selector to which you attach the click handler.
In your web page, change:
<a href="#page2" data-role="button">Gallery</a>... to:
<a href="#page2" id="gallery" data-role="button">Gallery</a>... and replace your current embedding code with the following:
<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() {
$('#gallery').click(function() {
loadGallery();
});
});
</script>
<div id="juicebox-container">@laurentsch
Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if a web page uses any jQuery code at all, I would certainly recommend including a separate jQuery JavaScript file as you suggest (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
The original poster's web page already includes a separate jQuery JavaScript file so there should be no problem in this respect.