It sounds like, when the Juicebox gallery is loaded into the gallery container, the gallery container may exist on the web page but with no dimensions (being that it is not visible until the 'Gallery' tab is clicked). If the gallery has a galleryWidth of '100%' but the gallery container has no dimensions, then the gallery's actual width will be 100% of zero.

One possible solution would be to put the Juicebox embedding code into a JavaScript function and then call the function when the 'Gallery' tab is clicked (after the gallery container has been assigned dimensions).

Another possible solution might be to give your gallery a fixed pixel galleryWidth (for example '800px'), although this will prevent the gallery from being responsive in the horizontal dimension (which may or may not be a problem depending on the design and layout of your web page).

I hope this points you in the right direction.

It sounds like we're on the right track.

Sure!

Usually, your embedding could would look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600px",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Put the JavaScript section into a function and add an event listener (a click handler) to call the function (to load the gallery) when your 'Gallery' tab is clicked.
If, for example, your 'Gallery' tab has an id="gallery_tab", then your embedding code would look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at your gallery's environment live on your web server and hopefully help further.
Thank you.

Unfortunately, the URL you provided does not work so I cannot see your gallery's web page.

If, for example, you are following the regular embedding instructions here, then you would just use the embedding code I provided (changing the gallery dimensions and background color as necessary) instead of the embedding code provided on the 'Publish' tab of JuiceboxBuilder. (It would just be a simple swap of code.)

Without being able to see your gallery's web page, I do not know how you are currently embedding your gallery.
If you are using the baseUrl method (which you might be using if you are following the Embedding in a Drupal Site instructions), then just amend the path to your 'juicebox.js' file and add the baseUrl entry (pointing towards the gallery folder) to the modified embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="/galleries/gallery1/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: "/galleries/gallery1/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

However, if you are using the Juicebox Module for Drupal, then putting the embedding code into a JavaScript function and adding custom code to call the function when an element on your web page is clicked is not going to be easy. The module automatically embeds the gallery into your web page and you'd need to modify the module's source code to achieve this.

There are a couple of reasons why this may not be feasible, though.
(1) The Juicebox Module for Drupal was not written by ourselves and, as such, I am not overly familiar with the module's source code (and do not know how easy or difficult such a modification would be). Support for the module would be better directed towards the Drupal forum where the author of the module (Ryan Jacobs) might be able to help further.
(2) The Juicebox Module for Drupal uses a non-standard embedding method (it does not just drop the regular embedding code into the web page) so swapping the module's embedding code for my modified embedding code above is not going to be possible.

If you really need to get this working with your tabs, then I'd recommend following the Embedding in a Drupal Site instructions and using the modified baseUrl code that I posted above. Just make sure that both paths in the code (the path to the 'juicebox.js' file and the baseUrl entry, pointing towards the gallery folder) are correct.

Still no joy with the URL I'm afraid...

I hope that Ryan (or another Drupal Juicebox Module user) can help you out over in the Drupal forum but I suspect that trying to integrate my solution into the module will not be an easy task.

Maybe there's a different solution that a user of the bootstrap tab system that you use can recommend (perhaps they have experienced a similar issue with other HTML elements embedded into the tabs ).

Being that the problem resolves itself when the browser is resized, you could perhaps manually trigger a resize when your tab is clicked. (Such a solution would be independent of Juicebox and the module's code.)
Try adding the following code to your web page:

<script>
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            $(window).trigger('resize');
        });
    });
</script>

Again, this assumes that your 'Gallery' tab has an id="gallery_tab". (If not, then just change #gallery_tab in the code above to the correct 'id' for your 'Gallery' tab.)
It also assumes that jQuery is loaded into your web page. (Juicebox comes bundled with its own version of jQuery so as long as the code is run after the 'juicebox.js' file is loaded into your web page, then all should be fine.)
Please note that this proposed solution has not been tested so I do not know whether it will work or not, but it should be a fairly quick and easy thing to try (as long as you can get the JavaScript code into your web page).