When each tab is selected, try redefining the dimensions of each gallery using the setGallerySize() Juicebox-Pro API method.
Otherwise, rather than loading all the galleries at once when the page is initially loaded, you might light to try loading the galleries on demand using a technique such as the following. This should be fairly easy to implement as the tabs on your page are used solely to select which gallery to display.
Here is a basic example.
First, create two galleries (named 'gallery1' and 'gallery2') and keep the galleries in their individual folders.
Now use the following code as an HTML page and place it in the same directory as the two gallery folders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Multiple Galleries</title>
<script src="gallery1/jbcore/juicebox.js"></script>
<script>
function loadGallery(base) {
new juicebox({
containerId : 'juicebox-container',
baseUrl : base,
galleryWidth: "600",
galleryHeight: "400",
backgroundColor: "rgba(255,255,255,1)"
});
}
$(document).ready(function() {
loadGallery('gallery1/');
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
<div id="links">
<a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a><br />
<a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
</div>
</body>
</html>When the user clicks on a link, the loadGallery() JavaScript function will fire and the selected gallery will be displayed in the 'juicebox-container' div on the page.
The only parameter in the loadGallery() function (e.g. the 'gallery1/' in loadGallery('gallery1/');) is the baseUrl of the selected gallery.
I hope this example helps. It should be fairly straightforward to follow and adapt to your own needs.
