The custom CSS is affecting the position of the image within the Splash Page container and the only way to counteract this is with CSS. The custom CSS will be applied to whatever image you choose to use for the Splash Page, no matter what shape or size it is.
Additionally, if your gallery is responsive, then the aspect ratio of the Splash Page will be dependent on the dimensions of the browser viewport being used to view the gallery so you have no way of knowing what shape and size the Splash Page will actually be for any given user (so there is no ideal size to use for the Splash Page image).

The quickest and easiest solution to the problem is to ensure that the max-width: 100% !important; CSS rule is not applied to the Splash Page image by removing the !important declaration from the rule. (This will likely not adversely affect other images on your web page at all.)

However, if you do not want to change the Jetpack CSS, then you'll need to change the Juicebox CSS instead.
Open the plugin's 'wp-juicebox/jbcore/classic/theme.css' file in a plain text editor.
Search for max-width: none; and replace all instances (there are four) to max-width: none !important.
In the current version of Juicebox-Pro (v1.5.1), they are on lines 119, 197, 247 and 696.

Otherwise, you could just add the following to the end of the 'theme.css' file:

.juicebox-gallery img, .jb-idx-thb-list .jb-idx-thumb img, .jb-dt-main-frame img, .jb-idx-thumbnail-container .jb-splash-holder img {
    max-width: none !important;
}

As the 'theme.css' file is loaded in your web page after the 'style.css' file, the !important declarations in the 'theme.css' file will override the !important declaration in the 'style.css' file

I hope this make sense and helps you to resolve your problem.

You're welcome! I'm glad it worked. Thank you for letting me know.

Please post suggestions for future versions in the Feature Requests forum thread. (You can post suggestions for Juicebox and all official plugins written by ourselves there.)
This keeps all the requests together and ensures that they will not be overlooked by the developers.
I do not know the likelihood of any ideas being implemented in future versions but this is certainly the best place for all ideas.
Thank you!

No. Unfortunately, there is no Juicebox plugin for darktable.
All known plugins for Juicebox are listed here.

The Juicebox plugin for Lightroom requires Lightroom 4, 5, 6, Classic CC 7 or higher.
This is noted on the plugin's own support page here.
(The plugin will not work with Lightroom CC.)

In late 2017, Adobe split what was then known simply as Lightroom CC into two separate products. Lightroom CC became Lightroom Classic CC (currently on version 8.2.1) and Adobe released a new version of Lightroom under the name Lightroom CC (currently on version 2.2.1).
Unfortunately, the new Lightroom CC does not accept third-party plugins or web engines so it is not possible to use the Juicebox plugin with this version.

There are other ways to create Juicebox galleries, though (you do not need to use Lightroom).
You can use JuiceboxBuilder (the standalone desktop program to create and edit galleries) or the Juicebox Photoshop Template (if you have Photoshop) or you can create a Juicebox gallery manually using the sample 'web' gallery as a template following the Manually Creating a Gallery instructions.

I hope this helps to clarify things.

When using JuiceboxBuidler-Pro to create a gallery and resize images, you can set whatever image dimensions you like (in the 'Set Image Sizes' control panel after clicking the 'Change Sizes...' button on the 'Images' tab).
Please note that these image dimensions are maximum image bounds (rather than the actual dimensions for the resized images).
Images are resized respecting their aspect ratios and the resized images will always be within the maximum image bounds.
However, if your source images are square, then the resized images will also be square.

The background will always be the same size as the gallery itself.
The gallery dimensions are set via the galleryWidth and galleryHeight configuration options (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) which are set in the embedding code.
galleryWidth and galleryHeight can be fixed pixel values or percentages.
If using a galleryWidth of 100%, for example, then the gallery's actual width will be 100% of the width of the gallery's parent container (so the gallery's actual width will be dependent on other containers and CSS on the embedding page).

The Juicebox Module for Drupal is an unofficial plugin which was not written by ourselves.
As such, methods of resizing images and setting gallery dimensions will likely be different to how it is done in JuiceboxBuilder-Pro.
If the module's own documentation (found here) does not help, then I'd recommend that you post your query in the Drupal forum where the author of the module (Ryan Jacobs) should be able to help you further.
He is active and very helpful in the Drupal forum and has a much better knowledge that I have of both the module and Drupal itself.

I hope these notes point you in the right direction.

Unfortunately, I'm not exactly sure what you mean.
Maybe you could explain your problem in more detail (let me know what you see and what you expect to see) and, if possible, post screenshots to demonstrate the problem.

In the meantime, maybe my notes below will help.

When using Juicebox-Pro's Background Image Options (found here), you can select the backgroundScale (STRETCH, FILL or NONE) in JuiceboxBuilder-Pro's 'Customize -> Background Image' section but the background image itself does not change (and is not adjusted) which each image within the gallery is viewed.

You can set your gallery's backgroundColor to be transparent (set the Background Color Opacity to '0' in JuiceboxBuilder-Pro's 'Customize -> Lite' section) and whatever CSS background you set in your gallery's embedding web page (whether for the gallery container or the entire web page) will shine through the gallery.
If you wanted to, you could then adjust (or change) the background depending on the image currently being displayed in the gallery (using JavaScript and CSS).

Here is an example which changes the gallery's background color to red for a portrait style image, green for a landscape style image and blue for a perfectly square image. You could modify the JavaScript to alter the background and way you like, for example to completely change or adjust the size of a CSS background image.
To see this example in action, create a sample gallery with JuiceboxBuilder-Pro and use the following as the gallery's 'index.html' file.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                backgroundColor: "rgba(0, 0, 0, 0)",
                containerId: "juicebox-container"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var url = info.imageURL;
                var img = new Image();
                img.src = url;
                var imageHeight = img.height;
                var imageWidth = img.width;
                var imageRatio = imageHeight/imageWidth;
                if (imageRatio > 1) {
                    // Image is portrait style
                    $('#juicebox-container').css('background-color', '#ff0000');
                }
                if (imageRatio < 1) {
                    // Image is landscape style
                    $('#juicebox-container').css('background-color', '#00ff00');
                }
                if (imageRatio === 1) {
                    // Image is perfectly square
                    $('#juicebox-container').css('background-color', '#0000ff');
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this help to clarify things and point you in the right direction.
If not, then please explain your problem in greater detail and I'll try to help further.
Thank you.

I see the difference in widths between the id="box_slideshow" and class="jb-splash-background" containers when I view your gallery in a narrow viewport (< 1024px), changing the user agent string in order to view the Splash Page, but I have been unable to replicate the problem in a test scenario of my own.
I embedded several galleries on a test page (gallery vs Splash Page, with and without a CSS margin being applied to the gallery container, with and without a CSS padding being applied to the gallery container) but do not see any discrepancy in the widths of the id="box_slideshow" and class="jb-splash-background" containers.

I can't quite wrap my head around the problem in your web page as you are using custom embedding code and there is a lot of external CSS to look through with many CSS margin rules (and I do not know how many, if any, are relevant to the problem at a glance).

Please take another look at your code (check all your CSS margin and padding values) to see if you can determine the cause of the problem.
I cannot replicate the problem myself in a stripped back example so the cause may lie somewhere within your code (and you'll certainly have a better understanding of your own web page's code that I do).
I can't be sure that your code is at the root of the problem but, being that I have so far been unable to replicate the problem, it might be worth another look.

Maybe its simply a case of the class="jb-splash-background" container not inheriting custom CSS being applied to the id="box_slideshow" container, in which case, whatever custom CSS you apply to the id="box_slideshow" container, you could also apply directly to the class="jb-splash-background" container. Not an ideal solution, perhaps, but it should t least result in matching widths.

The problem could also be due to the way that custom CSS is being applied.
For example, when setting Juicebox's height to a percentage value, it may be necessary to explicitly set the height of its parent divs via inline CSS (as noted here).
It is just a thought but if you are not already doing so, maybe you could try using inline CSS to apply your margin.

I've checked my browser's developer tools but don't see any obvious custom CSS which is causing the problem so maybe the issue is somehow due to custom CSS being applied via JavaScript.
Again, I'm not sure about this at all, but it might be another avenue to investigate further.

I notice that you use setGallerySize(width: int, height: int) within onInitComplete.
Maybe this is the root of the problem and it would help to calculate the width and height of the gallery before the embedding code and then set the galleryWidth and galleryHeight within the embedding code (instead of afterwards via the Juicebox-Pro API methods).

I hope my notes above help to some degree.

If you have uploaded a complete gallery folder to your web server, then you should be able to view the gallery on a web page of its own by opening the gallery's 'index.html' file (directly inside the gallery folder) in a browser.

For example, if your gallery folder is named 'juicebox_gallery' and you have uploaded the complete gallery folder to your root directory, then you should be able to view the gallery using this URL:
http://your-domain-name.com/juicebox_gallery/index.html

If you want to embed the gallery into an existing web page alongside other content, then you can use the baseUrl method of embedding documented here.

For reference, we have notes on Embedding with iWeb here which recommend using the baseUrl method of embedding.

Continuing with the example above, if your gallery folder is named 'juicebox_gallery' and you have uploaded the complete gallery folder to your root directory, then you can embed the gallery into a web page using the following embedding code (changing the gallery dimensions and background color if necessary):

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

The leading slashes in the paths above denote your root directory so as long as your gallery folder is named 'juicebox_gallery' and has been uploaded to your root directory, then the embedding code above will work in any web page throughout your site without modification.

If you are having trouble with your domain name or do not know where to upload files on your web server so that they appear in URLs using your domain name (for example where the root directory is for your domain), then your web host should be able to help you out.

I hope my notes above help.
Please let me know how you get on and if I can be of any further assistance.
Thank you.

I'm glad that you've been able to resolve your problem.
Thank you for letting me know.

Browser caching can sometimes be a hindrance to development but it is rarely a problem that visitors to your website will encounter, as noted in the following FAQ:
When I update my gallery I don't see my changes online. Why?

No-one else has reported any issues with the forum when using Safari. Do you maybe have any browser extensions installed which might be interfering with things? If you do have any browser extensions installed, then try temporarily disabling them to see if this makes a difference. Don't worry about creating a couple of test posts. I can delete them later.

If anyone reading this thread uses Safari and has experienced any issues with the forum, please let me know in this thread (post using a different browser if necessary). Thank you.

For anyone else reading this thread, here are the suggestions I have already made to the original poster via email:

(1) Try uninstalling and then reinstalling JuiceboxBuilder-Pro but, before reinstalling the application, please delete the following files and folders manually to make sure that there is nothing left behind from previous installations.

• /Applications/JuiceboxBuilder-Pro.app/

• /Users/Username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro

• /Users/Username/Library/Preferences/JuiceboxBuilder-Pro

(2) If you have any security software installed, the try temporarily disabling it (whilst both installing and running JuiceboxBuilder-Pro) to make sure that it is not somehow interfering with the application.
I would not normally recommend disabling security software but disabling it temporarily may be a useful step in troubleshooting your problem. Please do so at your own risk and disconnect from the internet before doing so.

I'm sorry to hear that neither of these suggestions has helped.
It sounds like you might have an underlying problem with Adobe AIR on your system.
To try to narrow down possible causes, try installing and running a different Adobe AIR application to see if the same problem occurs.
You can download some sample AIR applications from here: https://www.adobe.com/devnet/air/sample … cript.html

If you find that the problem happens with all AIR applications, then the problem is with Adobe AIR itself (rather than with JuiceboxBuilder-Pro). If this is the case then it might be helpful to post in the Adobe AIR forum: https://forums.adobe.com/community/air

I realise that this will not directly solve your problem but it might help to point you in the right direction.
Please let me know how you get on.

Edit #1:
Incidentally, I have found these two unanswered queries in the Adobe AIR forum which seem to accurately describe the problem that you are experiencing. (It is unlikely that either of the posters were using JuiceboxBuilder-Pro so I expect that the problem is an Adobe AIR issue of some kind.)
https://forums.adobe.com/message/5850342#5850342
https://forums.adobe.com/message/6997574#6997574

Maybe posting in the Adobe AIR forum is, indeed, the best course of action.

Edit #2:
Try creating a new user account on your computer and then try installing JuiceboxBuilder-Pro under the new user account to see if this works. Maybe there's something strange going on with your current user account.

I hope my notes above help to some degree.

Agreed. However, it sounds like you've got things under control and are doing all you can to optimize things.
Unfortunately, I don't think I can add anything which would help further. I'll certainly post back here if I think of anything.

Thanks for sharing your CSS animated loading icon, though. Very interesting... works well and looks good!

You're welcome.

I realise that it's not ideal but at least knowing the root cause of the problem, we can workaround it.