Thank you, Steven. The html you provide works, but when I add the relevant parts to my index.html created by JB's LR plugin, I get the textbox and button, but no action at all when I click the button.
Here is original index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>2007 Boyer Family Photos</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="description" content="a year's worth of Boyer photos" />
<!--START OPEN GRAPH TAGS-->
<meta property="og:description" content="a year's worth of Boyer photos" />
<meta property="og:image" content="/images/IMG_0051.jpg" />
<meta property="og:title" content="2007 Boyer Family Photos" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<!--END OPEN GRAPH TAGS-->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
backgroundColor: "rgba(34,34,34,1)",
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%"
});
</script>
<div id="juicebox-container">
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>
Here is my modified index.html
<!DOCTYPE html>
<html lang="en">
<!-- modified based on https://juicebox.net/forum/viewtopic.php?pid=12545#p12545 -->
<head>
<title>2007 Boyer Family Photos</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<meta name="description" content="a year's worth of Boyer photos" />
<!--START OPEN GRAPH TAGS-->
<meta property="og:description" content="a year's worth of Boyer photos" />
<meta property="og:image" content="/images/IMG_0051.jpg" />
<meta property="og:title" content="2007 Boyer Family Photos" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/" />
<!--END OPEN GRAPH TAGS-->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
backgroundColor: "rgba(34,34,34,1)",
containerId: "juicebox-container",
galleryHeight: "95%",
galleryWidth: "100%"
});
</script>
<script>
$(document).ready(function() {
$('#show').click(function() {
var index = $('#index').val();
jb.showThumbPage(index);
});
});
</script>
<div id="input">
<input id="index" type="text" />
<span> </span>
<input id="show" type="button" value="Show" />
</div>
<div id="juicebox-container">
</div>
<!--END JUICEBOX EMBED-->
</body>
</html>
Can you tell me what is wrong?
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?
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?