If I've understood correctly, the layout of the SSM pages comes from the "jbcore/full.html" file, which already contains something looking like that.
No. The 'full.html' file is not directly related to Small Screen Mode. It is used to display the gallery (whether in Small or Large Screen Mode) when the gallery is expanded in a new page (rather that on top of the embedding page), for example when expandInNewPage="TRUE" or on iOS devices. (Please see here for further details).
The key to your solution is to use the <meta> 'viewport' tag I posted above.
Try the following example.
Create a sample gallery with JuiceboxBuilder-Pro (just use all default values) and use the following code as the gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jbGallery;
function setContainerHeight() {
var winHeight, headerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight);
$('#juicebox-content').height(newH);
return newH;
}
function doLayout() {
if (!jbGallery) {
setContainerHeight();
return;
}
window.setTimeout(function() {
var winWidth;
winWidth = window.innerWidth ? window.innerWidth : $(window).width();
var newH = setContainerHeight();
jbGallery.setGallerySize(winWidth, newH);
}, 200);
}
$(document).ready(function () {
doLayout();
$(window).resize(doLayout);
jbGallery = new juicebox({
containerid : "juicebox-container",
showSplashPage: "NEVER"
});
});
</script>
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
margin: 0px;
padding: 0px;
}
a {
color: #cccccc;
}
#header {
background-color: #333333;
height: 20px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#juicebox-content {
width: 100%;
}
</style>
<title>Test</title>
</head>
<body>
<div id="header">
<a href = "gallery1/index.html">Gallery 1</a> | <a href = "gallery2/index.html">Gallery 2</a>
</div>
<div id="juicebox-content">
<div id="juicebox-container"></div>
</div>
</body>
</html>
The code is based on the View Resizable Gallery with Top Menu Example sample gallery from the Resizable Gallery support section (but with the external CSS integrated into the page, the footer removed and the <meta> 'viewport' tag from above in place).
This should display the header and gallery without any vertical (or horizontal) scroll bars. The header will be a fixed height and the gallery will occupy the remainder of the browser window. The gallery will initially display the thumbnail page (as showSplashPage="NEVER" is set in the gallery's embedding code) with the thumbnails scaled large due to the <meta> 'viewport' tag.
You could use this page as a template for each of your gallery pages if you like.
If you do not want the header to be displayed on your gallery pages (and just want to use the Back Buttons within the gallery), then you can link directly to gallery 'index.html' files (exactly as they were created by JuiceboxBuilder-Pro) from your 'Go ahead, click one...' page.
If you want the header to be displayed on your gallery pages only in Large Screen Mode (when the gallery is viewed on desktop browsers) but not in Small Screen Mode (on mobile devices), then you could use the Juicebox-Pro API getScreenMode() method to determine which Screen Mode is being used and then use JavaScript (specifically jQuery in the example below) to remove the 'header' <div> from the Document Object Model. In the code above, add the following:
if (jbGallery.getScreenMode() === 'SMALL') {
$('#header').remove();
}
... immediately after:
jbGallery = new juicebox({
containerid : "juicebox-container",
showSplashPage: "NEVER"
});
Please note that my suggestion above uses jQuery. 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 your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).