As you are aware, the main image scales dynamically with the size of the user's browser window but the thumbnails do not.
Is it possible that if the window is reduced in width that it kicks in the responsive display shown on small screens ie mobile format?
You could perhaps use JavaScript to listen out for a change in the browser's width and display the gallery in Large Screen Mode if the width is greater than a certain threshold value and Small Screen Mode if the width is less than (or equal to) the threshold value. You would also need to use the Juicebox-Pro API. However, this might get a little complex as there would be several things to take into account and you may run into unforeseen problems.
(1) For example, you would need to ensure that the gallery switches Screen Modes only when the threshold is crossed (and not every time the browser window is resized).
(2) Also, if the gallery is displayed in a desktop browser of limited width, Juicebox would ordinarily display the gallery in Large Screen Mode but you would want the gallery to be displayed in Small Screen Mode in this instance.
(3) You would also need to ensure that the gallery is always displayed in Small Screen Mode where Small Screen Mode would normally be used.
(4) The only way to switch screen modes would be to reload the gallery with a different Screen Mode setting and when reloading a gallery, your would need to ensure that the currently displayed image is retained rather than the gallery displaying the first image in the gallery each time the switch is made.
There may be other considerations to take into account which I have not yet thought of.
However, you might like to try the following as a starting point (although please bear in mind that Juicebox was not designed with such functionality in mind).
To see the example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.
<!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">
var fii = 1; // Set initial firstImageIndex to 1
var sm = 'AUTO'; // Set initial screenMode to AUTO
var thresholdWidth = 600; // Set thresholdWidth to 600px
var jb; // Initialize Juicebox object variable for use with Juicebox-Pro API methods
// Function to load gallery with specified firstImageIndex (to always display current image) and screenMode
function loadGallery(fii, sm) {
jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii,
screenMode: sm
});
}
//Function to check width of browser window
function setScreenMode() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var mode = windowWidth < thresholdWidth ? 'SMALL' : 'LARGE'; // Determine new screenMode variable
if (sm !== mode) { // If screenMode variable changes, do the following...
sm = mode; // Set screenMode variable to be new screenMode value
fii = jb.getImageIndex(); // Set image number to be displayed when gallery is reloaded
loadGallery(fii, mode); // Load gallery with specified firstImageIndex and screenMode
}
}
// Do the following when the web page is initially loaded
$(document).ready(function() {
$(window).resize(setScreenMode); // Run setScreenMode() function each time the browser window is resized
loadGallery(fii, sm); // Load gallery with initial firstImageIndex (1) and screenMode (AUTO) settings
setTimeout(function() { // Timeout required to give enough time for gallery to return actual screenMode used (SMALL or LARGE)
sm = jb.getScreenMode(); // Set screenMode variable to be actual screenMode used
if (sm === 'LARGE') { // If actual screenMode used is LARGE, do the following...
setScreenMode(); // Check width of browser window
}
}, 500);
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>