Is that possible: 950px height on larger devices, less on small screens.
Juicebox uses only one galleryHeight value for both Small Screen Mode and Large Screen Mode so trying to use a different value for each screen mode is not going to be easy.
However, there are a few things you could try.
(1) Load the gallery with dimensions for Large Screen Mode, check the Screen Mode being used (via the Juicebox-Pro API getScreenMode() method) and resize the gallery with appropriate dimensions (via the setGallerySize() method) if Small Screen Mode is being used. However, the setGallerySize() method accepts only fixed pixel values for both the width and height so maintaining a width of 100% would not be possible using this method.
If you wanted to try this, though, you could use embedding code such as:
<script>
var galleryWidthLargeScreenMode = '1000';
var galleryWidthSmallScreenMode = '1000';
var galleryHeightLargeScreenMode = '950';
var galleryHeightSmallScreenMode = '650';
var jb = new juicebox({
containerId: "juicebox-container",
galleryWidth: galleryWidthLargeScreenMode,
galleryHeight: galleryHeightLargeScreenMode,
screenMode: "AUTO"
});
jb.onInitComplete = function() {
var screenMode = jb.getScreenMode();
if (screenMode === 'SMALL') {
jb.setGallerySize(galleryWidthSmallScreenMode, galleryHeightSmallScreenMode);
}
};
</script>(2) Use your own custom JavaScript function to check if a mobile device is being used to view the gallery and then set a gallery height accordingly. It is unlikely that your JavaScript check will exactly match up with Juicebox's own internal test for whether to use Small or Large Screen Mode (I do not know the exact logic that Juicebox uses) but it might be good enough for most situations.
You could maybe use a galleryHeight entry in your embedding code such as:
galleryHeight: /Android|BlackBerry|iPad|iPhone|iPod|Nexus|webOS/i.test(navigator.userAgent) ? '650' : '950',(3) Load the gallery with dimensions for Large Screen Mode, check the Screen Mode being used (via the Juicebox-Pro API getScreenMode() method) and reload the gallery with appropriate dimensions if Small Screen Mode is being used. This method will allow you to maintain a gallery width of 100% (unlike #1 above) and your choice of heights will always match up with the Screen Mode being used (unlike #2 above) but it would be the most complicated of the 3 suggestions to implement and you'd probably want to hide things using CSS until the gallery has been loaded with the correct dimensions (and you'd also need a tracking variable to ensure that the reloading of the gallery does not happen repeatedly).
To see this in action, create a test 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" />
<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;
}
#juicebox-container {
display: none;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var counter = 0;
var galleryWidthLargeScreenMode = '100%';
var galleryWidthSmallScreenMode = '100%';
var galleryHeightLargeScreenMode = '950';
var galleryHeightSmallScreenMode = '650';
var jb;
function loadGallery(width, height) {
jb = new juicebox({
containerId: "juicebox-container",
galleryWidth: width,
galleryHeight: height,
screenMode: "AUTO"
});
counter++;
}
loadGallery(galleryWidthLargeScreenMode, galleryHeightLargeScreenMode);
jb.onInitComplete = function() {
var screenMode = jb.getScreenMode();
if (counter === 1 && screenMode === 'SMALL') {
loadGallery(galleryWidthSmallScreenMode, galleryHeightSmallScreenMode);
}
if ((counter === 1 && screenMode === 'LARGE') || (counter === 2 && screenMode === 'SMALL')) {
$('#juicebox-container').show();
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>#2 would certainly be the easiest to implement but you might like to try incorporating the code from #3 into your web page.
I hope this helps.