Unfortunately, it is not possible for a gallery to switch screen modes after it has been loaded.
A gallery uses only one set of configuration options (e.g. one value for screenMode) which are loaded when the gallery is initially displayed. Configuration options cannot be changed afterwards.
If you want to switch screen modes, then you would need to reload the gallery with the new screenMode value.
For your scenario, you would need to initially load the gallery in Small Screen Mode, override Juicebox's own thumbnail handling and, when a thumbnail is clicked, determine which thumbnail was clicked and reload the gallery in Large Screen Mode passing the correct image for use as the firstImageIndex value (so that the correct image is displayed when the gallery is reloaded in Large Screen Mode).
I have tried to do this myself but it gets very messy very quickly.
There are delay issues (a need to wait for thumbnails to be drawn before overriding their functionality) and the override needs to be performed each time a new thumbnail page is displayed.
I've been unable to get this working cleanly, otherwise I would post some code which you might have been able to use.
I'd recommend just setting screenMode to one of its official values (SMALL, LARGE, AUTO) and letting Juicebox run as intended.
It might not be exactly as you'd like it to be but it'll be a lot less hassle (and doesn't involve manual coding and overriding core Juicebox functionality).
Edit:
Here's the best I've been able to do.
Please note that it is not fully tested and such modifications (which override core Juicebox functionality), whilst you are free to try, are not officially supported. Also, please be aware that there is a short delay (500ms) before the override kicks in. As long as a user does not click a thumbnail within half a second of loading the page (or changing the thumbnail page), everything should hopefully be fine.
To see this example in action, just create a sample gallery with JuiceboxBuilder-Pro, replace the gallery's 'index.html' page with the code below and open the HTML file in a browser.
I hope that you can use this as a starting point and perhaps integrate it into your own web page.
<!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;
function loadGallery(fii, sm) {
jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii.toString(),
screenMode: sm,
showsmallthumbnav: 'TRUE'
});
}
$(document).ready(function() {
loadGallery(-1, 'SMALL');
jb.onThumbPageChange = function() {
var mode = jb.getScreenMode();
if (mode === 'SMALL') {
window.setTimeout(function() {
$('.jb-idx-thumb').off('click');
$('.jb-idx-thumb').click(function() {
var index = $(this).attr('data-position');
var position = parseInt(index, 10);
var fii = position + 1;
loadGallery(fii, 'LARGE');
});
}, 500);
}
};
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>