If you are trying to incorporate your own original functionality (switching between different galleries with different heights) and functionality from your forum thread here (to allow different thumbnails configurations depending on the width of the browser window) and also this functionality (changing the height of the galleries depending on the height of the browser window), then things are starting to get really complicated. There is the added complication that setGallerySize() accepts only fixed pixel values and does not accept percentages so you might want to reload the selected gallery with new dimensions (rather than use setGallerySize()) if you want to retain gallery widths of 100%.
Assuming you want both your galleries to be the same size as each other (which is not currently the case) but want their heights to change when a threshold height is crossed, then try replacing:
<script>
$(document).ready(function() {
//load gallery 1
loadGallery('colStonewareBrickSets/', '650px');
//initialize top buttons
$("#button-1").on("click", function(){loadGallery('colStonewareBrick/', '500px');});
$("#button-2").on("click", function(){loadGallery('colStonewareBrickSets/', '650px');});
});
function loadGallery(base, height) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container',
backgroundColor: 'fff',
galleryWidth: '100%',
galleryHeight: height
});
}
</script>
... with:
<script type="text/javascript">
var jb;
var a, b, c; // maxThumbColumbs, maxThumbRows, thumbsPosition
var y = 'colStonewareBrickSets/'; // Initial baseUrl
var z; // galleryHeight
var galleryHeightLarge = '800';
var galleryHeightSmall = '400';
var size;
var thresholdHeight = 480;
var thresholdWidth = 700;
var tracker = false;
function loadGallery(a, b, c, y, z) {
jb = new juicebox({
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
galleryWidth: '100%',
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
tracker = true;
}
function initialLoad() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
if (windowWidth < thresholdWidth) {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
} else {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
}
if (windowHeight < thresholdHeight) {
size = "SMALL";
z = galleryHeightSmall; // galleryHeight
} else {
size = "LARGE";
z = galleryHeightLarge; // galleryHeight
}
loadGallery(a, b, c, y, z);
}
function checkSize() {
var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
var windowHeight = window.inneHeight ? window.inneHeight : $(window).height();
if (windowWidth < thresholdWidth && c === 'LEFT') {
a = '10'; // maxThumbRows
b = '1'; // maxThumbColumns
c = 'BOTTOM'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
if (windowWidth >= thresholdWidth && c === 'BOTTOM') {
a = '3'; // maxThumbRows
b = '3'; // maxThumbColumns
c = 'LEFT'; // thumbsPosition
loadGallery(a, b, c, y, z);
}
if (windowHeight < thresholdHeight && size === 'LARGE') {
z = galleryHeightSmall;
size = 'SMALL';
loadGallery(a, b, c, y, z);
}
if (windowHeight >= thresholdHeight && size === 'SMALL') {
z = galleryHeightLarge;
size = 'LARGE';
loadGallery(a, b, c, y, z);
}
}
$(document).ready(function() {
initialLoad();
$(window).resize(checkSize);
$("#button-1").click(function() {
y = 'colStonewareBrick/'; // baseUrl
loadGallery(a, b, c, y, z);
});
$("#button-2").click(function() {
y = 'colStonewareBrickSets/'; // baseUrl
loadGallery(a, b, c, y, z);
});
});
</script>
If you want to do things that Juicebox-Pro was not designed to do (and perhaps make use of the Juicebox-Pro API for certain things, too), then I would certainly recommend taking a look at learning JavaScript. It's really the only way to achieve the things you are asking.
There's a good guide to JavaScript on the Mozilla Developer Network here.
I hope this points you in the right direction.
Incidentally, you could ensure that your galleries are responsive (please see this forum post for details) but this would mean that you would essentially have no control over the shape or size of your gallery (it would be entirely dependent on the shape and size of the user's browser window) and there may very well be gaps above and below (or to the left and right of) the main images in the gallery.
Having two fixed heights (like in the code above) which work well for the most popular browser window shapes and sizes of your target audience might be the best compromise.