Please post the URL to your main web page so that I can take a look at the problem (and the code that you are using) for myself.
If would be much easier to troubleshoot if I can see the problem live on your web server. (I'm really not sure what might be causing your problem but once I see your web page, I should hopefully have a better idea of what's going on.)
Thank you.

It looks like the problem may be that you are hard-coding your  main domain in the paths in the embedding code but that you are visiting your web site via your 'www' subdomain.

Please see this FAQ which holds the key to solving your problem:
My gallery works on 'www.example.com' but not on 'example.com' (or vice versa). Why?

Try using the following <script> section in your embedding code and your gallery should work on both your main domain and your 'www' subdomain.

<script src="/Product_Gallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "/Product_Gallery/",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(255,255,255,1)"
    });
</script>

(The leading slashes in the paths denote your root directory.)

You're welcome!
I'm glad you've got it working. Thank you for posting back to let me know.

When using relative paths, they should be relative to the page containing the gallery's embedding code so the paths you suggested should work fine:

<script src="galleries/american2/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "galleries/american2/",
        galleryWidth: "816",
        galleryHeight: "575",
        backgroundColor: "rgba(92,92,92,1)"
    });
</script>

You could also use a leading slash in your paths to denote that the paths start at the root directory so the following should also work fine:

<script src="/galleries/american2/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        baseUrl: "/galleries/american2/",
        galleryWidth: "816",
        galleryHeight: "575",
        backgroundColor: "rgba(92,92,92,1)"
    });
</script>

When using a baseUrl, it does not matter where on your web server you upload your gallery folder to (it does not need to be uploaded to the root directory) as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct. Your current web site structure is fine.

Please try either of the embedding code <script> sections above. Both should work fine.

Please see this forum post regarding making galleries responsive.

Your gallery is already responsive. Its dimensions change when the browser window is made narrower and the gallery elements adjust correspondingly (for example, fewer thumbnails are displayed in a narrow browser window).

Please note that the gallery's height does not change when you change the width of the browser window.
It is not standard behavior for a div's height and width to both change when a browser window is resized in only one dimension.
If you want your gallery's aspect ratio to always remain constant, then you would have to implement a solution such as the one in this forum post.

A Juicebox-Pro gallery uses the same set of configuration options for both Small Screen Mode (SSM) and Large Screen Mode (LSM). It is not possible to have two different sets of values and switch between them and it is not possible to change configuration option values once a gallery has been loaded. The gallery would need to be reloaded with new values.
Technically, you could load the gallery, check whether SSM or LSM is being used (via the Juicebox-Pro API getScreenMode() method) and then reload the gallery using a specifc XML file corresponding to the screen mode being used. However, this is not an ideal solution.

There are some configuration options which are specific to the different screen modes (e.g. showThumbsOnLoad is for LSM only whereas showSmallThumbsOnLoad is for SSM only) but other options such as buttonBarIconSize apply equally to both SSM and LSM.

If you want to configure Juicebox-Pro beyond what can be achieved with the available configuration options, you can certainly try modifying the 'jbcore/classic/theme.css' file. However, knowledge of CSS would be required and such modifications would not be officially supported. Also, you might find that you run into unforeseen problems as Juicebox will not know of any modifications made to this file and if any changes that you make alter the size or position of any gallery elements, there may be unwanted knock-on effects with regard to the gallery layout.

Here are a few other notes which may help.

Unfortunately, the frameWidth configuration option is LSM only.

Please see this forum thread.

You can check how your gallery looks in SSM by setting screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.

If you find there are things that you would like to do that currently cannot be done (or at least not easily), then please post your suggestions in the Feature Requests forum thread. This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.

OK. I'm glad everything is fine. Thank you for letting me know.

For others reading this thread, it sounds like the original poster may be referring to the Splash Page which is used by default when the gallery is embedded in a page alongside other content and displayed in Small Screen Mode.
For more information on the Splash Page and Screen Modes, please see here.

You're welcome! I'm glad my suggestion worked.
(Hopefully this should only be a temporary measure until the bug is fixed although it will do no harm to leave the CSS code in place.)

It looks like some custom CSS code on your web page which handles the right-to-left aspect of your web page is switching the left and right hit-areas of the gallery.
I suspect it is the following code from your 'rtl.css' file (specifically the 'direction' property).

#page {
    text-align: right;
    direction: rtl;
}

This code sets the direction for everything within the #page container including your Juicebox gallery (which is nested within the #page container).
You could either modify your CSS so that it applies to only those elements on your web page which require the 'direction' property (through use of further CSS selectors) or you could explicitly set direction: rtl; for the Juicebox gallery container by editing the WP-Juicebox plugin's 'wp-juicebox.php' file in a plain text editor and changing line 287 from:

$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '"></div>' . PHP_EOL;

... to:

$string_builder .= '<div id="juicebox-container-' . $clean_gallery_id . '" style="direction: ltr;"></div>' . PHP_EOL;

Please note that the line number above refers to the current version of WP-Juicebox (v1.4.4.1).

If you are referring to the delay between the Button Bar background and the Button Bar icons being displayed, then you could ensure that they are displayed together by hiding and showing the .jb-bb-bar class as well as the .jb-bb-button class.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    .jb-bb-bar, .jb-bb-button {
        visibility: hidden;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container'
    });
    jb.onInitComplete = function (e) {
        var mode = jb.getScreenMode();
        if (mode == 'SMALL') {
            $('.jb-bb-button').css('font-size', '16px');
        }
        $('.jb-bb-bar, .jb-bb-button').css('visibility', 'visible');
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

If you want to have your gallery displayed in Small Screen Mode in all browsers and on all mobile devices (rather than just when Juicebox-Pro detects a small-screen device), then set screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.

No problem!
Glad it was an easy fix.