The gallery's dimensions are determined by the galleryWidth and galleryHeight options (set in the embedding code) and the gallery's size remains constant (unless percentage dimensions are used and the size of the browser window changes). No controls within the gallery will affect the gallery's size.
When you choose to show thumbnails, then space needs to be made available for them so the size of the main image decreases.
When you chose to hide the thumbnails, then extra space within the gallery becomes available and the size of the main image increases to take advantage of this (to display the main image as large as possible within the gallery).
It is not possible to not change the size of the main image when the thumbnails are toggled on or off (you'd have a blank space where the thumbnails would be when they are not shown).
You could, however, choose to always use the Small Screen Mode version of the gallery, where thumbnails and main images are displayed on separate pages (rather that sharing the gallery space together on the same page), by setting screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
If you choose to continue to use screenMode="AUTO", then you can disable the thumbnails completely when the gallery is displayed in Large Screen Mode by setting showThumbsOnLoad="FALSE" ('Customize -> Thumbnails') and showThumbsButton="FALSE" ('Customize -> Lite'). Alternatively, you can always have the thumbnails displayed (and prevent them from being hidden) by setting showThumbsOnLoad="TRUE" and showThumbsButton="FALSE".
If you really want to have the size of your gallery change when the thumbnails are toggled on or off, then you could try something like the following which takes advantage of several Juicebox-Pro API methods.
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="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 galleryWidthHideThumbnails = 600;
var galleryWidthShowThumbnails = 600;
var galleryHeightHideThumbnails = 400;
var galleryHeightShowThumbnails = 505;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: galleryHeightShowThumbnails,
galleryWidth: galleryWidthShowThumbnails,
showThumbsButton: "TRUE",
showThumbsOnLoad: "TRUE"
});
jb.onInitComplete = function() {
if (jb.getScreenMode() === "LARGE") {
jb.onShowThumbs = function(showing) {
window.setTimeout(function() {
var width = showing ? galleryWidthShowThumbnails : galleryWidthHideThumbnails;
var height = showing ? galleryHeightShowThumbnails : galleryHeightHideThumbnails;
jb.setGallerySize(width, height);
}, 500);
}
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
You can change the gallery dimensions as you like.
Please note that this is not an ideal solution. Juicebox was not designed with this in mind and a short delay is required to ensure that the gallery is not resized until after the thumbnails are toggled on or off. This ensures that the thumbnails are not temporarily displayed on top of the main image (which looks untidy) but has the side effect that the main image is temporarily resized when the thumbnails are shown (slightly less untidy).
As this is not something that Juicebox was designed to do, I would recommend using the available configuration options to reach a compromise although you are certainly free to use and modify the code I provided if you like (although please be aware that trying to do something that Juicebox was not designed to do can often be fraught with difficulties and unforeseen problems might need to be tackled along the way).
I hope these notes help.