Here's an example of how you can find the actual height of the current image being displayed in the gallery (using JavaScript and the Juicebox-Pro API).
Just create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container"
});
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;
alert('Actual height of current image is ' + height + 'px.');
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
Please note that this will provide the actual height of the file in the 'images' folder (not the height at which the image is displayed in the gallery which will depend on factors such as the gallery dimensions, the browser window size and whether or not gallery elements reserve space in the gallery reducing the available image area).
If you wanted to act upon the actual height of the current image and change the gallery's height to suit the current image's height you could do something like the following:
<!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;
}
#wrap {
width: 100%;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var widthInteger = 600;
var widthString = widthInteger.toString();
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: widthString,
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(widthString, newHeight);
};
</script>
<title>Test</title>
</head>
<body>
<div id="wrap">
<div id="juicebox-container"></div>
</div>
</body>
</html>
The gallery would have a constant width (600px in the example) and its height would be dependent on the height of the current image. The '105' value adds enough height to the gallery to accommodate the thumbnails and the thumbnail padding at their default values of '85' and '10' (top and bottom).