You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → quickly jump many pages
Sorry, I don't know good unambiguous keywords for this:
How can I navigate by jumping many pages at a time?
Is there a slider or a way to enter a page number?
Use case: I'm creating a number of galleries with >1000 photos each; putting as many thumbs on a page as reasonable (>30), but I still have >100 pages. There will be times when I or another user wants to jump from beginning to middle. Not fun to click the forward arrow 100 times for that.
You could use the Juicebox-Pro API (specifically the showThumbPage() method) to jump straight to a certain thumbnail page.
Here's an example which allows the user to enter a thumbnail page number into an input box and when the 'Show' button is clicked, the chosen thumbnail page is displayed.
Just create a sample gallery in JuiceboxBuilder-Pro (with enough images that multiple thumbnail pages will need to be displayed) and use the following code as your 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">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
showPagingText: "TRUE",
showThumbsOnLoad: "TRUE"
});
$(document).ready(function() {
$('#show').click(function() {
var index = $('#index').val();
jb.showThumbPage(index);
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<input id="index" type="text" />
<span> </span>
<input id="show" type="button" value="Show" />
</div>
<div id="juicebox-container"></div>
</body>
</html>This example is purely to demonstrate functionality.
You can adapt and style the method of input to suit your own web page.
I hope this helps.
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?
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.
Juicebox Support Forum → Juicebox-Pro Support → quickly jump many pages
Powered by PunBB, supported by Informer Technologies, Inc.