What you are describing is the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user clicks/taps the Splash Page, the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.

You can choose to not use the Splash Page by setting showSplashPage="NEVER".
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE".

If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.

A browser's developer tools can be very useful but they are not always the most accurate way to emulate a mobile device and determine how a gallery will look on such a device. (Just something to bear in mind when testing your page's layout.)

Please see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

Please see this note regarding Using Percentage Heights.

When setting a percentage height, make sure that all parent containers of your gallery have heights set via CSS. Otherwise, Juicebox may not be able to determine what its actual height should be. For example, if you set a gallery height of 100%, Juicebox needs to know what its height should be 100% of. In a CMS environment (such as Drupal) where you may have little or no control over the containers that the gallery is nested within, it might be wise to use a fixed pixel height (such as '600px') instead of a percentage to avoid problems that can arise when using a percentage.

If your current theme does not already so so, you could try scaling your web page for mobile devices but adding the following tag to the head section of your web page. This might help.

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />

Set showAutoPlayButton="TRUE" and the AutoPlay Button will de displayed in the Button Bar and the user can click/tap this to toggle AutoPlay on and off.

I hope this information helps.

Please note that the Juicebox module for Drupal is an unofficial plugin which was not written by ourselves (but is well supported by its author in the Drupal forum). This is noted on the module's support page:

Upgrading the Drupal module to Juicebox-Pro does not change the module's interface.
There are no individual controls for each Pro configuration option. Instead, you can add Pro configuration options as text (for example, autoPlayOnLoad="TRUE") into the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').
Here is a Drupal forum post with the author's thoughts on adding further options to the module's interface.

This sounds like there may be a CSS conflict between your current theme and the your Juicebox gallery. Some CSS rules from your theme might be overriding the gallery's own CSS rules and adversely affecting the gallery's layout. If your theme uses global CSS rules which, for example, apply to all <div> or <img> tags on your web page, then they will also apply to these elements within the gallery. It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS rules and the gallery will have no option but to inherit them. The best solution would be to apply CSS rules to only those elements on your web page that require them through use of CSS selectors (classes and ids). However, this might be difficult with a theme that you did not write yourself.
You might like to at least test this theory by using a different theme (at least for testing purposes) to see if it makes a difference.

You can also use your browser's developer tools (usually accessible via F12) to investigate which CSS rules are being applied to which HTML elements on your web page.
Please see this forum post for links to pages which might help if using a browser's developer tools.

Watermarking is a feature of JuiceboxBuilder-Pro (the desktop application which comes with Juicebox-Pro) only. Please see the Adding Watermarks support section for details.
Images are watermarked at the time the gallery is built by the application (at the same time the images are resized for the gallery). The watermarks are not added at the time the gallery is displayed so there are no watermark options which can achieve this.
You could perhaps use JuiceboxBuilder-Pro to watermark your images and then upload the watermarked images for use in your Juicebox gallery within Drupal.

Please see the Adding Audio support section for details.
You would need to point towards MP3 and OGG versions of an audio track using the audioUrlMp3 and audioUrlOgg Pro configuration options.
You could also set playAudioOnLoad="TRUE" (to automatically start the audio track playing when the gallery is initially loaded) and/or showAudioButton="TRUE" (to display the Audio Button on the Button Bar and allow visitors to your web site to toggle the audio on and off).

I hope these notes help to clarify things.

Try running your gallery page's URL through the Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
You could try their Open Graph Object Debugger, too: https://developers.facebook.com/tools/debug/og/object

This should refresh Facebook's cache of your web page, including Open Graph tags (although it may not be instant).

Here are a few other suggestions I've found on the web which may or may not help (but might be worth trying).

(1) Try placing your og:image tag before all others on your web page.

(2) Try using og:image:type, og:image:width and og:image:height Open Graph tags in addition to your og:image tag. For your image, try the following:

<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1024" />
<meta property="og:image:height" content="730" />

(3) Try renaming the image you use for your og:image (and the corresponding og:image value itself) so that Facebook has to fetch the 'new' image.

Hopefully one of these suggestions will help.

The following should work (as long as the $Url variable has already been defined earlier in the page).

baseUrl: "<?php echo $Url; ?>",

You might also need to use the $Url variable in the path to the 'juicebox.js' file, e.g.:

<script src="<?php echo $Url; ?>/jbcore/juicebox.js"></script>

The code above assumes that your $Url variable does not end with a slash. You can adjust the code if necessary.

Suggestions from user222 in this forum thread: https://juicebox.net/forum/viewtopic.php?id=2171

I'm glad you've got things working.
Thank you for letting me know.

The og:image entry must be an absolute URL in the form http://www.example.com/gallery/images/image001.jpg
A relative path will not work.

You can either:

(1) Edit your gallery's 'index.html' page in a plain text editor and change:

<meta property="og:image" content="/images/20120317_126-Edit.jpg" />

... to:

<meta property="og:image" content="http://www.judophoto.com.au/judo/kidsjudo/images/20120317_126-Edit.jpg" />

... or:

(2) Rebuild your gallery with the Lightroom plugin and enter your gallery directory's URL (http://www.judophoto.com.au/judo/kidsjudo) as the 'Share Url' in the 'Sharing' section.
The plugin will use this as the first part of the path for the og:image entry (before completing the path to the first image in the gallery).

I hope so, too.

You're welcome!

It looks like you might need to enter the Album Id (instead of the Album Name) and this is not available within the new Google Photos interface.

Visit this URL in your browser and you'll get an RSS feed of your albums.
https://picasaweb.google.com/data/feed/api/user/<User Id>

If you then hover over (or click on) an album, you'll see a 19 digit number at the end of the URL. This is the Album Id which you can use in the WP-Juicebox interface.

I've tested this myself with an album I created today in Google Photos and it seems to work fine.
Here are the details if you'd like to try to display it yourself (just for testing purposes).
Google User Id: 109901943277912891450
Google Album Id: 6278925468933743905

I hope this helps.

Edit:
Also, visit https://picasaweb.google.com/<User Id>/<Album Id> (corresponding to the album that you are trying to display) and, in the right-hand sidebar next to the thumbnail representing the album, make sure that the visibility setting is 'Public on the web'. If the visibility is set to any other value (e.g. 'Limited' or 'Only you'), the click the 'edit' link and select 'Public on the web'.

The WordPress Dashboard will let you know if updates are available only for plugins which are hosted on WordPress's own site. We host WP-Juicebox on our own site (on this web page) and updates have to be performed manually.

I notice that you currently use WP-Juicebox v1.4.0.1.
There have been 8 releases since v1.4.0.1 and many bugs have been fixed, including some relating to Picasa/Google Web Albums. Please see the Version History for details.
I recommend that you upgrade to the current version (v1.4.4.2).
You can download the current version from the plugin's support page and then upload the contents of the zip file to your plugins directory. (You might want to remove the Lite 'jbcore' folder from the plugin before uploading to prevent your Pro 'jbcore' folder from being overwritten.)

I have tried using the User Id and Album Name that you use in your own gallery and your images do not appear so, even with v1.4.4.2, there seems to be a problem with your gallery.
(Incidentally, the correct Album Name is probably 'sketches' rather than the long string from your video.)

When I go to the first link you posted, I am redirected to a Google login page.
Please check that your Google Photos are made public (rather than private).
This may also be a contributing factor to your problem.

With v1.4.4.2 in place and all your photos made public, you should hopefully be able to display your gallery.

You can test that things are working OK by displaying one of my own test albums hosted on Google Photos using the following details. I have just double-checked that this is working OK.
Picasa/Google User Id: 109901943277912891450
Picasa/Google Album Name: TestAlbum

If you can display my gallery but not your own, then at least we know that the WP-Juicebox functionality is working OK on your web server and that the problem lies with your own Google Photo album.

If you cannot display my own gallery, then the problem is with WP-Juicebox on your web server.
If this is the case, then I might need access to your web server in order to run some tests. (We'll cross this bridge later if we need to.)

The suggestions above should at least point us in the right direction.

Thank you for posting the code you are using.

As you are switching between galleries rather than displaying both at the same time, you will need to pass the height for each gallery as a parameter to your loadGallery() function.

Try using the following code for your <body> section. It gives your 'glass3010' gallery a height of '400px' and your 'glass3010Sets' gallery a height of '600px'. (You can change the heights as required.)

<div id="juicebox-container"></div>

<script>

    $(document).ready(function() {
        //load gallery 1
        loadGallery('glass3010/', '400px');
        //initialize top buttons
        $("#button-1").on("click", function(){loadGallery('glass3010/', '400px');});
        $("#button-2").on("click", function(){loadGallery('glass3010Sets/', '600px');});
    });

    function loadGallery(base, height) {
        new juicebox({
            baseUrl: base,
            containerId: 'juicebox-container',
            backgroundColor: 'fff',
            galleryWidth: '100%',
            galleryHeight: height
        });
    }

</script>