I notice that you define your gallery dimensions using percentages (which is absolutely fine) but in your web page, depending on the size of the browser window, your gallery can be quite small (and there simply may not be enough space to display the full image caption).
However, here are a few suggestions which may help.
(1) You could maybe increase the initial size of your gallery on your web page (by increasing the size of your gallery's parent container). This would allow more room for the captions.
(2) I notice that your gallery currently uses screenMode="LARGE". On mobile devices (especially in portrait orientation), your gallery is displayed with limited width (and little room for the captions). If you were to set screenMode="AUTO" (the default value for this configuration option), then the Splash Page would initially be displayed on mobile devices and, when the Splash Page is tapped, the gallery would expand to fill the viewport, giving the captions more room.
(3) Your gallery currently uses captionPosition="BELOW_IMAGE". This limits the caption's width to match that of the image. If you were to set captionPosition="OVERLAY" or captionPosition="BOTTOM" instead, then the caption's width will span the entire stage (giving the captions more room when the gallery is displayed in desktop browsers).
(4) When using captionPosition="BELOW_IMAGE" (as your gallery currently does), Juicebox-Pro will use the maxCaptionHeight value as the actual (fixed) height for the caption area. If you want to continue using captionPosition="BELOW_IMAGE", then you could increase maxCaptionHeight (to a value greater than its default value of 120) to increase the height of the caption area.
(5) You could actually display your captions outside your gallery by fetching the current image's caption via the Juicebox-Pro API (specifically the getImageInfo() method) and then using JavaScript to display the caption elsewhere on your page (perhaps in a container below your gallery).
Here's an example of how this could be achieved. To see it in action, just create a sample gallery with JuiceboxBuilder-Pro (making sure to give your images some sample captions) and use the following code as your gallery's 'index.html' 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">
function escape(input) {
return input.replace(/&/g, '&').replace(/'/g, ''').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
}
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
jb.onImageChange = function(e) {
var id = e.id;
var info = jb.getImageInfo(id);
var caption = escape(info.caption);
$('#output').html('<p>' + caption + '</p>');
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
<div id="output"></div>
</body>
</html>
I hope you're able to incorporate one or more of these suggestions into your own gallery's web page.
