Judging by the vertical nature of the Button Bar, it looks like a dimensional/timing problem (maybe the tab's dimensions are not fully set up when the gallery is loaded).
Additionally, if I resize the browser window (forcing the gallery to be redrawn with new dimensions), the main image and the Button Bar are both displayed correctly.
Thinking about my original suggestion, it looks like adding code such as:
<script>
loadGallery('aluminium/', 'juicebox-container-1');
</script>.. in each tab will still load all galleries as soon as the web page is loaded (so galleries 2, 3 and 4 may still be loaded within hidden tabs). It looks like tabs 2, 3 and 4 may not be visible when the web page is initially loaded but all the HTML and JavaScript code within the tabs will be parsed by the browser on load.
However, loading only one 'juicebox.js file per page, embedding each gallery into a unique container and using a loadGallery() function are still steps in the right direction so all your work so far has not been in vain.
Here's perhaps a better suggestion which should hopefully work (and load each gallery on demand only after the parent tab is visible, i.e. when a tab is clicked).
Create a click handler for your tab headers and run the loadGallery() function to load the gallery corresponding to the selected tab.
Remove the individual calls to the loadGallery() function (but leave the gallery container divs in place) and add the following code just below the loadGallery() function itself.
$(document).ready(function() {
$("li[role='presentation'] a").click(function() {
var gallery = $(this).attr('aria-controls');
var base = gallery + '/';
var container = 'juicebox-' + gallery;
loadGallery(base, container);
});
});(The code above extracts the gallery name from your conveniently named 'aria-contols' attribute and uses it to form the baseUrl and containerId.)
If this does not work, then you might need to introduce a slight delay before loading the gallery (to ensure that the tab's dimensions are set up) so try this (which has a delay of 200ms before loading the gallery).
$(document).ready(function() {
$("li[role='presentation'] a").click(function() {
window.setTimeout(function() {
var gallery = $(this).attr('aria-controls');
var base = gallery + '/';
var container = 'juicebox-' + gallery;
loadGallery(base, container);
}, 200);
});
});I hope this helps to resolve your problem.