Can you tell me what is wrong?
You need to give your 'juicebox' object a variable name so that you can refer to it via the Juicebox-Pro API.
You can name your 'juicebox' object whatever you like but, in my sample, code, I used the variable name 'jb' so just change:
new juicebox({... to:
var jb = new juicebox({Also, is there a way to make the added showThumbPage textbox be inside the dark area, so it looks like a part of the web page?
It would not be easy to integrate a new HTML element inside the gallery. Juicebox has not been designed with this in mind and there's no obvious place for it to go.
However, you could perhaps use the Gallery Title to display your thumbnail page input box and button.
If you then position the Gallery Title in the TOP area (a reserved area at the top of the gallery where the Gallery Title, Button Bare and Back Button can be positioned, then it would not overlap any other gallery elements.
(You would lose the ability to display a Gallery Title in the gallery, though.)
Try the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryTitlePosition: 'TOP',
galleryTitle: '<div id="input"><input id="index" type="text" /><span> </span><input id="show" type="button" value="Show" /></div>'
});
jb.onInitComplete=function() {
$('#show').click(function() {
var index = $('#index').val();
jb.showThumbPage(index);
});
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Otherwise, you could include your thumbnail page input box and button in a header above the gallery on your web page.
You could give the header a fixed height and then have the gallery resize to fill the remaining space in the browser window (similar to the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header support section).
Here's a sample 'index.html' file that you can use (or copy/modify to suit your own needs).
<!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%;
}
#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 galleryHeight = windowHeight - headerHeight;
$('#wrap').height(galleryHeight);
}
$(document).ready(function() {
$(window).resize(doLayout);
jb = new juicebox({
containerId: "juicebox-container"
});
$('#show').click(function() {
var index = $('#index').val();
jb.showThumbPage(index);
});
doLayout();
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<input id="index" type="text" />
<span> </span>
<input id="show" type="button" value="Show" />
</div>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>Also, why on earth does the index.html generated by Juicebox have the <script>...</script> in the <body>...</body> instead of the <head>...</head> area?
It does not actually make any functional difference whether the embedding code is in the <head> or <body> section.
JuiceboxBuilder puts the <script> section in the <body> alongside the Juicebox container <div> (which must be in the <body>) to keep all the embedding code together so that it can be copied and pasted (if necessary) in a single chunk.
