Unfortunately, I am not familiar with Adobe Flash HTML5 Canvas documents but it might help to think of a Juicebox gallery as a complete self-contained web site. A Juicebox gallery is essentially a web page ('index.html') with many resource files (CSS, JavaScript, images, fonts, etc.).
If you can load a web page (or a small self-contained web site) into an Adobe Flash HTML5 Canvas document, then you should hopefully be able to load a Juicebox gallery (via the gallery's 'index.html' page).
This would be more like loading a gallery's 'index.html' page into an iframe than actually embedding the gallery into an existing web page by following the regular embedding instructions here. (The gallery is actually embedded into the 'index.html' page with the required embedding code. There is just nothing else on the page.)
I'm not sure if this will help (or if what you are trying to do is even possible) but it might at least point you in the right direction.

Setting the security level to 'High' in Internet Explorer disables JavaScript ('Security Settings -> Scripting -> Active scripting').
Juicebox requires on JavaScript to work. This is mentioned in the banner at the top of our home page.

Disabling JavaScript will prevent the gallery from being displayed. There is no way around this.

The only alternative would be to include SEO content code (generated by JuiceboxBuilder-Pro) in your web page. Please see the Search Engine Optimization (SEO) support section for details.

Try viewing this demo gallery (which includes SEO content code) as an example. If JavaScript is enabled, then the gallery will be displayed. If JavaScript is disabled, then the gallery images will be displayed in a vertical list along with the image titles and captions.
http://www.juicebox.net/demos/pro/sharing/

If you are referring to the Splash Page image (the image that you tap to expand the gallery in Small Screen Mode), then, by default, Juicebox uses the first image image the gallery and center-crops it to fit the gallery area. The first image in the gallery itself (after the Splash Page is tapped) is not cropped. It is displayed in its entirety with its aspect ratio respected.

You could set a specific image for the Splash Page (perhaps more appropriate to the aspect ratio of your gallery) via the splashPageUrl ('Customize -> Splash Page') configuration option.

Otherwise, you could choose to not use the Splash Page by setting showSplashPage="NEVER", in which case, visitors to your web site will initially be presented with the thumbnail page. If you wanted to, you could then set showSmallThumbsOnLoad="FALSE" ('Customize -> Thumbnails') to initially display the first image in the gallery instead of the thumbnail page.

For reference, a list of Splash Page configuration options can be found here.

Many thanks for the screenshots.

Out of interest, could you please check to see if the same problem occurs with either of the following full page demo galleries. (That way, we can use one of our own galleries as a test case without relying on your own URLs.) Thank you.
http://www.juicebox.net/demos/lite/full/
http://www.juicebox.net/demos/pro/full/

No. This would not be possible.
Every image in the gallery has a corresponding thumbnail. This is core functionality and it is handled by the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be modified.
Even if you tried to hide the first thumbnail with CSS, Juicebox would not know of your custom modification and this would cause problems with the gallery layout.

There is no way to set different icons for the Button Bar for Small and Large Screen Modes.

However, as long as you do not set showInfoButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section), then the entire overlay (including the Button Bar and all its icons) can be toggled on and off in Small Screen Mode by tapping the screen.

If you set showInfoButton="TRUE", then the Button Bar (including the Info Button) will always be present and tapping the Info Button will toggle the remainder of overlay elements on and off.

An alternative might be to use the Juicebox-Pro API getScreenMode() method to detect whether Small or Large Screen Mode is being used and then reload the gallery (if required) with the social media icons hidden in Small Screen Mode.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.

<!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;
            }
            #juicebox-container {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var counter = 0;
            var jb;
            function loadGallery(value) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    screenMode: "AUTO",
                    shareFacebook: value,
                    shareGPlus: value,
                    sharePinterest: value,
                    shareTumblr: value,
                    shareTwitter: value
                });
                counter++;
            }
            loadGallery(true);
            jb.onInitComplete = function() {
                var screenMode = jb.getScreenMode();
                if (counter === 1 && screenMode === 'SMALL') {
                    loadGallery(false);
                }
                if ((counter === 1 && screenMode === 'LARGE') || (counter === 2 && screenMode === 'SMALL')) {
                    $('#juicebox-container').show();
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

It may take a little longer to load than usual as it's actually loading the gallery twice if Small Screen Mode is being used (once to determine the screen mode being used and the second time with the correct 'share' configuration options).
The gallery is hidden from view until after the final load (so the user does not see the gallery load twice).

Maybe not ideal but perhaps the best solution for something that Juicebox was not designed to do.

Also, if you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

I notice when you hover over the link on your main page, the browser's status bar displays the 'node/73' URL but clicking the link does not actually take you to that page. The browser remains on the 'team-vertical' page and seems to dynamically load fresh content (but not the Juicebox gallery). After clicking the link, there is no sign of any Juicebox embedding code on the page.

Unfortunately, I am not familiar with your Drupal theme and do not know where content should be placed in order for it to be displayed when you click the links on your main page.

As you are aware, the problem seems to be directly related to your Drupal theme rather than Juicebox.
If you replaced the Juicebox gallery with any other content, then the same thing would likely happen when you click the link on your main page: the extra content would not show up unless you went directly to the 'node/xyz' page.

There's no problem with posting your query here (hopefully some other Drupal users will read this and be able to help you out further) but you might have better luck in the Drupal forum. Maybe someone familiar with the theme will be able to offer some help.

Just for the record, there is a dedicated Juicebox module for Drupal which can be found here.
I don't know if it will be of any use to you but I thought I should mention it in case you are somehow able to integrate it into your web site.

Unfortunately, I do not have access to an iPad Pro but I have viewed your galleries on an iPhone running iOS 9.2.1 and do not see any cropping of your images in portrait or landscape orientations (in Mobile Chrome, Mobile Firefox and Mobile Safari).

As your galleries are full page galleries (with no other content on the pages), there is certainly no conflicting CSS.
It sounds like the problem may be directly related to certain mobile browser/device combinations and is not something that can be fixed with any of the available configuration options.

Perhaps the best course of action would be for you to provide a screenshot demonstrating the problem and I will pass it on to the developers who will investigate further. Please upload a screenshot somewhere (either your own web server or a file sharing service such as Dropbox) and post a link to it in this forum thread.

Also, does the problem happen when the gallery is initially loaded in landscape orientation or just when the device is rotated into landscape orientation?

Thank you.

Try adding the following CSS to your web page (or at the bottom of your gallery's 'jbcore/classic/theme.css' file):

.jb-splash-holder img {
    max-width: 40px !important;
}

This should hopefully prevent your custom CSS rule from affecting the Splash Page image in your gallery.

My suggestion above works OK in Mobile Chrome and Mobile Safari on my iPod Touch.

However, here are a few thoughts that might help (although please note that Juicebox was not designed with this functionality in mind).

(1) On iOS devices, the gallery will automatically expand in a new page. Please see the Expand Gallery Behavior support section for details.
Try setting expandInNewPage="FALSE" (at least for testing purposes) to see if this makes a difference.

(2) My code above forces the gallery to always be displayed in Large Screen Mode. If you want to retain Small Screen Mode for mobile devices, you could try the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "AUTO",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE",
            });
            jb.onInitComplete = function (){
                var screenMode = jb.getScreenMode();
                if (screenMode === 'LARGE') {
                    jb.onExpand = function(expanded) {
                        if ((expanded && thumbs) || (!expanded && !thumbs)) {
                            jb.toggleThumbs();
                        }
                    };
                    jb.onShowThumbs = function(showing) {
                        thumbs = showing;
                    };
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

(3) There may also be a timing issue. Introducing a short delay (such as one second in the code below) before toggling the thumbnails might help. (It might not be an ideal solution but doing so should at least tell us whether this is the root of the problem or not.)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var thumbs = true;
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600",
                screenMode: "LARGE",
                showExpandButton: "TRUE",
                showThumbsButton: "FALSE",
                showThumbsOnLoad: "TRUE"
            });
            jb.onExpand = function(expanded) {
                if ((expanded && thumbs) || (!expanded && !thumbs)) {
                    setTimeout(function() {
                        jb.toggleThumbs();
                    }, 1000);
                }
            };
            jb.onShowThumbs = function(showing) {
                thumbs = showing;
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look and hopefully help further.
Please also let me know what version of iOS your device runs and what browser(s) the problem occurs in (Mobile Chrome, Mobile Firefox, Mobile Safari). Thank you.

This is not possible using only the available configuration options.
In Large Screen Mode, the thumbsPosition value is consistent across all browsers and devices and cannot be changed depending on orientation or the aspect ratio of the viewport.

Here's a possible solution using JavaScript to detect the aspect ratio of the viewport (each time the viewport size changes) and reload the gallery with the required layout if necessary.

To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the 'index.hml' page with the code below.

<!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 a = '3';
            var b = '3';
            var c = 'RIGHT';
            function loadGallery(a, b, c) {
                new juicebox({
                    containerId: "juicebox-container",
                    maxThumbColumns: a,
                    maxThumbRows: b,
                    thumbsPosition: c
                });
            }
            function thumbsStatus() {
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                if (windowWidth < windowHeight && c === 'RIGHT') {
                    a = '10';
                    b = '1';
                    c = 'BOTTOM';
                    loadGallery(a, b, c);
                }
                if (windowWidth >= windowHeight && c === 'BOTTOM') {
                    a = '3';
                    b = '3';
                    c = 'RIGHT';
                    loadGallery(a, b, c);
                }
            }
            $(document).ready(function() {
                thumbsStatus();
                $(window).resize(thumbsStatus);
                loadGallery(a, b, c);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope this helps.