@gfs
Thank you for your suggestion.
The following solution is not as elegant as your suggestion would be but you might like to give it a try and adapt it to suit your own needs.
You could use the Juicebox-Pro API and JavaScript to allow the user to change the displayTime (via custom HTML 'minus' and 'plus' buttons on your web page) and then reload the gallery (via a further HTML 'go' button) using the new display time (and passing the current image via firstImageIndex to that the gallery does not start at the beginning each time the gallery is reloaded with a new display time).
To see this in action, 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="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
// Initialize variables
var dt = 5;
var dtcurrent = dt;
var jb;
var increment = 1;
var minimum = 1;
var maximum = 10;
// Function to load gallery when 'Go' button is clicked
// First parameter is displayTime
// Second parameter is firstImageIndex
function loadGallery(dt, fii) {
jb = new juicebox({
autoPlayOnLoad: "TRUE",
backgroundColor: "ffffff",
containerId: "juicebox-container",
displayTime: dt,
enableAutoPlay: "TRUE",
enableLooping: "TRUE",
firstImageIndex: fii,
galleryHeight: "400",
galleryWidth: "600",
showAutoPlayButton: "TRUE",
showImageOverlay: "ALWAYS"
});
}
// Run following when Document Object Model is complete
$(document).ready(function() {
// Run following when 'minus' button is clicked
$('#minus').click(function() {
// Reduce display time and ensure it does not go below minimum value
dt = Math.max(dt - increment, minimum);
// Display display time on screen
$('#display').text(dt);
});
// Run following when 'plus' button is clicked
$('#plus').click(function() {
// Increase display time and ensure it does not go above maximum value
dt = Math.min(dt + increment, maximum);
// Display display time on screen
$('#display').text(dt);
});
// Run following when 'go' button is clicked
$('#go').click(function() {
// Only reload gallery if display time has changed
if (dt !== dtcurrent) {
// Set current display time
dtcurrent = dt;
// Load gallery
loadGallery(dt, jb.getImageIndex());
}
});
// Display display time on screen
$('#display').text(dt);
// Load gallery
loadGallery(dt, 1);
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<span>Display Time</span><input id="minus" type="button" value="-" /><span id="display"></span><input id="plus" type="button" value="+" /><input id="go" type="button" value="Go" />
</div>
<div id="juicebox-container"></div>
</body>
</html>