A gallery's height can be expressed as either:
(1) an absolute fixed pixel value, or...
(2) a percentage (of the height of the gallery's parent container).
In either case, the size of the gallery (the 'juicebox-container' <div>) will not change depending on the height of the image it is currently displaying.
This is no different than setting the height of any other <div> on a web page.
By default, Juicebox-Pro will display the image as large as possible within the gallery's image area without cropping.
You can change the way that the image is displayed within the image area through use of the imageScaleMode configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) but changing imageScaleMode will not change the height of the gallery.
For example, you could set imageScaleMode="FILL" which will fill the image area but will crop the image if the image and the image area do not have the same aspect ratio.
If you really want to dynamically change the height of the gallery depending on the dimensions of the image being displayed, you could use the Juicebox-Pro API (specifically the onImageChange event and the getGalleryInfo method) to get the URL of the current image.
You could then use JavaScript to get the dimensions of the image and determine the new height for the gallery.
Then, you could set the gallery's height accordingly using the Juicebox-Pro API setGallerySize method.
Here is an sample 'index.html' page which you could modify to suit your needs:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '600',
galleryHeight: '400',
imageScaleMode: 'FILL'
});
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((600/width)*height) + 95;
jb.setGallerySize('600', newHeight);
}
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
