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.

It sounds like you might have AdBlock installed as a browser extension in Chrome.
The first two images in your gallery have the text 'ad1' and 'ad2' in their filenames and AdBlock may be seeing these as advertisements and blocking them.
Try changing the filenames so that they do not contain the text 'ad'.
This should hopefully solve your problem.

You could maybe hide the .jb-bb-button class as soon as the page loads and make it visible only after you have changed the font size. Try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    .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-button').css('visibility', 'visible');
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.

For any other users trying to embed a Juicebox gallery using Abode Muse, the following links might be useful.
Embedding With Adobe Muse: http://www.juicebox.net/support/embeddi … adobe-muse
Alternate Adobe Muse Embedding Instructions: http://www.muse-themes.com/blogs/news/6 … adobe-muse