But nevertheless could you elaborate a bit on " by using a page template with a header and/or footer to accommodate extra content)." What is a page template?
Take a look at the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header support section. (There's a link to this support section in one of my posts above.)
I was thinking that you could perhaps use this as a template for your own web page. The example has a header and footer, both with fixed heights (which you could change if you like), and the gallery takes up the remainder of the available space in the user's browser window.
You can view the source of the example in your browser and copy/modify it to suit your own needs (adding whatever content you like in the header and footer and swapping the sample gallery for your own). Some knowledge of CSS, HTML and JavaScript would be useful but the code should hopefully be fairly easy to follow.
In fact, here's a single page example which you can try.
To see it in action, just create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: #222222;
margin: 0px;
}
#header {
background-color: #222222;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
padding: 10px 0px;
text-align: center;
width: 100%;
}
#footer {
background-color: #222222;
bottom: 0px;
color: #666666;
font-family: sans-serif;
font-size: 20px;
height: 50px;
left: 0px;
padding: 10px 0px;
position: relative;
text-align: center;
width: 100%;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function doLayout() {
var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height(), 10);
var headerHeight = parseInt($('#header').outerHeight(true), 10);
var footerHeight = parseInt($('#footer').outerHeight(true), 10);
var galleryHeight = windowHeight - headerHeight - footerHeight;
$('#wrap').height(galleryHeight);
if (jb) {
var galleryWidth = parseInt($('#wrap').innerWidth(), 10);
jb.setGallerySize(galleryWidth, galleryHeight);
}
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<span>Header</span>
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
<div id="footer">
<span>Footer</span>
</div>
</body>
</html>You can change the header and footer content to whatever you like.
For example, the header container might look something like this:
<div id="header">
<a href="/HurlList/" style="color: #ffff00; font-family: 'Times New Roman'; font-size: 24px; text-align: center; text-decoration: none;">Return to lots more Hurlingham Memories</a><br /><br /><span style="color: #33b4ca; font-family: 'Times New Roman'; font-size: 48px; text-align: center;">Art Group Reception.</span>
</div>... and the footer container might look something like this:
<div id="footer">
<span style="color: #33b4ca; font-family: 'Times New Roman'; font-size: 24px; text-align: center;">© Tony Gamble</span>
</div>You might need to increase the height of the header to accommodate two lines of text (in the CSS at the top of the web page) or reduce the font size of the text but I hope this points you in the right direction and gets you started.
(The inline CSS in the sample header and footer containers above could quite easily be added to the CSS section at the top of the web page to make things a little easier to read if you like but this would make no functional difference to the web page and there would no measurable benefit to doing so in such a short web page.)
If not I'll look for another program that will make a transparent PNG from my jpg that has a white background.
After a real struggle I have worked out how to use GIMP to produce text with a transparent background.
GIMP is certainly the program I'd personally recommend (for those who do not have Adobe Photoshop).
I've glad you've found it and are making progress.
Embedding the gallery into a page would presumably be two steps and I am not sure it is worth the effort - but I am willing to be persuaded.
It's really just something else to consider (and a personal preference). If you are happy with the results you are getting without embedding the gallery in a custom web page, then that's absolutely great and, as you suggest, being able to use the 'index.html' file directly from JuiceboxBuilder (without the need to embed the gallery in a custom web page) will result in fewer steps in your workflow.