There's nothing wrong with using an iframe but there are some drawbacks to doing so (which are noted here... scroll down to "2) Using an iframe") so I'd always recommend embedding directly into a web page (following either the regular embedding instructions or the baseUrl embedding instructions) where possible.

If you run into any difficulties, then perhaps you could let me know a little more about how you are trying to embed your gallery (maybe an example would help me to understand your scenario better) and I'll try to help further.

@adec

You're welcome! I'm glad this thread has helped you out.

I hope all goes well. Just let me know if you run into any difficulties and I'll do my best to help you out.
For reference, the Embedding Guide is here.

What you are seeing in Firefox is the gallery being displayed in Small Screen Mode (where thumbnails and main images are displayed on separate pages).
Small Screen Mode is usually used only on mobile devices (or when Small Screen Mode is forced by setting screenMode="SMALL").
(More information on Screen Modes can be found in the Gallery Tour here.)

If all three screenshots are from the same gallery, then screenMode must be set to AUTO, otherwise a certain Screen Mode (either Large or Small) would always be used on all devices and in all browsers, so something must be triggering Small Screen Mode to be used in your Firefox browser.

Here are a few things to check:

• Check that your Firefox browser is not in 'Tools -> Web Developer -> Responsive Design Mode'.

• Check that your 'View -> Zoom' is set to 100% and not zoomed in or out.

• Check that you do not have any browser extension installed and active which is currently changing the User-Agent string (for example, to mimic a mobile device).

I hope that this helps or at least points you in the right direction.

@mrp

Yes. You can set most configuration options in either the 'config.xml' file or the embedding code.
( I usually recommend setting options in JuiceboxBuilder-Pro as it seems to be the most popular method of creating and editing galleries and it does not involve any manual code editing.)
Please see the Setting Config Options support section for further details.

The only configuration options that must be set in the embedding code rather than the 'config.xml' file are listed in the Embed Options.
All other options can be set in either the 'config.xml' file or the embedding code.
(If an option is set in both the 'config.xml' file and the embedding code, then the value in the embedding code takes precedence over the value in the 'config.xml' file.)

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).

I realise that in an ideal world, it would be great to have no '[Violation]' entries in the console but it is worth remembering that these entries are only present in Chrome and only when the debugging level is set to 'Verbose'. (They are not classed as 'Errors', 'Warnings' or even 'Info'.)

Just out of curiosity, I loaded a few popular web pages into Chrome (adobe.com, amazon.com, apple.com, microsoft.com, mozilla.org) and they all display '[Violation]' entries (of one type or another, some more than others) in 'Verbose' mode.

That's down to the way that the 'juicebox.js' file is packed which is a choice that the developers have taken.

The 'juicebox.js' file uses eval() and CSP does not allow the use of eval() ("Eval and related functions are disabled") so, unfortunately, Juicebox will not be fully compatible with CSP guidelines.
There really is nothing that can be done about this (at user level) at the moment, although I have notified the developers of this so it is in their hands now.

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.

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.

That's great! Thank you for letting me know.

I see the 'Violation' entries in Chrome when setting the debugging level to 'Verbose'.
Unfortunately, there is nothing that a user can do to address this as the code which the 'Violation' entries refer to is buried deep within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.
However, I have notified the developers who will investigate the issue.

The Button Bar should not wrap unless there is not enough space for all buttons to be displayed on a single line.
I have created a test gallery (using the same configuration options that your gallery uses) and the Button Bar does not wrap there.
I notice that your 'juicebox.js' file is now v1.5.1 but your 'theme.css' file ('/juicebox/jbcore/classic/theme.css') is still v1.4.4.
Please ensure that all files within your gallery's 'jbcore' folder are up-to-date (v1.5.1) by replacing the existing 'jbcore' folder on your web server with the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore').
This should hopefully solve your problem.

It looks like what you are doing should work.
In fact, I have just recreated your setup and it works for me, without any console errors.

The console errors you are seeing may be unconnected to the passing of the data value.
"Cannot read property 'trySetContainerSize'" certainty sounds like a problem with Juicebox being unable to size the gallery correctly.

Please post the URL to your gallery's web page so that I can see the problem for myself.
Once I'm able to see the problem live on your web server, I might be able to determine the exact cause of the problem and propose a solution.
Thank you.

Also, if you are not already using the latest version of Juicebox-Pro (v1.5.1), then please try upgrading your gallery to see if this helps.
(I have been using Juicebox-Pro v1.5.1 in my own tests and have not seen the console errors you reported.)
If necessary, full instructions for downloading the latest version of Juicebox-Pro and upgrading existing galleries can be found in the Upgrading Juicebox support section.

Incidentally, shareURL is not a configuration option that needs to be set in the gallery's embedding code.
It is used only by JuiceboxBuilder-Pro to set valid Open Graph meta tags in the gallery's 'index.html' web page.
shareURL is included in a gallery's 'config.xml' file simply so that JuiceboxBuilder-Pro can read it when the gallery is opened for editing.
(shareURL is not used by Juicebox when a gallery is displayed.)

You should be able to move the entire JavaScript embedding code into a separate script and then just load this script after loading the 'juicebox.js' script.
I think this should work OK.
At its most basic:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <script src="jbcore/juicebox.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <div id="juicebox-container"></div>
</body>
</html>

'script.js':

new juicebox({
    containerId: 'juicebox-container'
});

I'm not sure what parameter you'd like to pass in the URL but you could do so with a query string, e.g.:

http://www.example.com/index.html?text=hello

You could then fetch the query string parameter from within the script using code such as:

if (window.location.search) {
    var key = 'text';
    var queryArray = {};
    var queryComponent;
    var queryString = unescape(window.location.search);
    var re = new RegExp('([^?=&]+)(?:=([^&]*))?', 'g');
    while (queryComponent = re.exec(queryString)) {
        queryArray[queryComponent[1]] = queryComponent[2];
    }
    var value = queryArray[key];
    // Do something with 'value' variable ("hello" in the example above)
}

(This may not be the most compact/optimized code for fetching a query string but it does handle multiple query string parameters.)

I'm not sure if this is exactly what you are looking for but it might point you in the right direction.

Many thanks for the suggestion (for a Juicbeox-Pro equivalent to SimpleViewer-Pro's thumbNavStyle="NUMERIC").
I've copied your post to the Feature Requests thread (here) where it will be seen by the developers.

I know that I've already mentioned this to yourself in an email but for anyone else reading this thread, it should be possible to achieve something like this manually using the Juicebox-Pro API (with help from the showThumbPage method) but knowledge of HTML and JavaScript would be required and you might need to get a little creative with the styling (SimpleViewer-Pro's thumbNavStyle="NUMERIC" used an ellipsis when too many thumbnail pages existed for there to be a link to every single one at once) and you might also need to overcome potential pitfalls along the way (such as the fact that the number of thumbnail pages may change in a responsive gallery if the browser window dimensions change).

An automated solution built-in to Juicebox-Pro would undoubtedly be easier to setup and use so thank you for the suggestion.
(Just a quick disclaimer, though, that I do not know what suggestions will be picked up by the developers and implemented in future versions.)