Juicebox was not designed with this functionality in mind (the size of the gallery changing depending on the size of each image within the gallery). Ordinarily, a gallery's size will remain constant (unless the gallery is responsive and the size of the user's borwser window changes) and images will be scaled to fit within the gallery's image area.
However, you could perhaps use something like the following. The example gallery below has a fixed width and the height of the gallery changes when a new image is selected, depending on the height of the image (and adding 105 pixels to take into account the thumbnails).
If uses several Juicebox-Pro API functions.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' file with the code below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var widthInteger = 600;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: widthInteger.toString(),
imageScaleMode: "SCALE"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var url = info.imageURL;
var image = new Image();
image.src = url;
var height = image.height;
var width = image.width;
var newHeight = Math.floor((widthInteger/width)*height) + 105;
jb.setGallerySize(widthInteger, newHeight);
};
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
Unfortunately, you are currently loading your gallery into an iframe and it is a little more difficult to have the gallery (on the page being loaded into the iframe) control the iframe's height (on a different page) when a new image is selected.
You would need to give your iframe an 'id', for example:
<iframe id="target" src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style="position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>
... and then add the following code after the jb.setGallerySize(widthInteger, newHeight); line in the sample above (to change the height of the iframe).
window.parent.document.getElementById('target').style.height = newHeight.toString() + 'px';
I hope this points you in the right direction.