First of all, when embedding multiple galleries into a single web page, there are a couple of things to note:
(1) The 'juicebox.js' file should be loaded only once per web page (from within one of your gallery folders), rather than once per gallery.
(2) Each gallery should be embedded into a container with a unique name. At the moment, all of your galleries are embedded into containers with a 'containerId' and <div> 'id' of "juicebox-container". There should be no duplicate 'is' on a web page.
The cause of your problem is likely to be #2 above.
It is possible that when the second tab on your page is selected (for example), the corresponding gallery is embedded into the first <div id="juicebox-container"> that the browser finds on the page (which is in the first tab and is now hidden from view).
Hopefully embedding your galleries into containers with unique names will help.
Another possible cause for your problem is that all your galleries are loaded as soon as your web page is loaded but, when the web page is loaded, only the first tab is visible and has dimensions. The other tabs are initially hidden and essentially have zero dimensions. The galleries on the other tabs have galleryWidth and galleryHeight of 100% so, when the web page is loaded, Juicebox calculates their dimensions to be 100 % of zero (which is zero, resulting in a non-visible gallery).
Here are a couple of things to try.
(1) Give your galleries fixed pixel dimensions rather than percentage dimensions (at least for testing purposes), to see if this helps.
(2) Alternatively, if you want to keep the gallery dimensions at 100% (for the galleries to be responsive), then you'll need to load them only after the selected tab is visible and has been given dimensions on your web page.
Put the gallery embedding code into a JavaScript function (with parameters for the baseUrl and containerId) and load the function (to load a specific gallery into the correct container) when a tab is selected.
For example, you could use something like the following (outside the tabs on your web page, perhaps in the <head> section):
<script src="aluminium/jbcore/juicebox.js"></script>
<script>
function loadGallery(base, container) {
new juicebox({
baseUrl : base,
containerId: container,
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,0)"
});
}
</script>
Now, inside the first tab (where you currently have each gallery's embedding code), use something like:
<div id="juicebox-container-1"></div>
<script>
loadGallery('aluminium/', 'juicebox-container-1');
</script>
... and inside the second tab, use something like:
<div id="juicebox-container-2"></div>
<script>
loadGallery('glass/', 'juicebox-container-2');
</script>
... etc.
(You can insert each gallery's SEO content code inside the corresponding <div> containers. I just left this out in my sample code above for clarity.)
I hope this helps and points you in the right direction.