The image used for the Splash Page can be set via the splashImageUrl configuration option.
If a splashImageUrl is not explicity set, then Juicebox will use the first image in the gallery.
This is by design. The # identifier and firstImageIndex option have no effect on the Splash Page image.

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. Thank you.

You could use JavaScript to fetch the image corresponding to a # identifier or query string variable from the gallery's XML file and set the splashImageUrl dynamically.
Here's an example using the # identifier. (You could use a query string variable instead if you like.)

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

    var hash = 1;

    if (window.location.hash) {
        hash = window.location.hash.substring(1);
    }

    var splash = '';

    $.get('config.xml', function(data) {

        splash = $.trim($(data).find('juiceboxgallery').find('image').eq(hash - 1).attr('imageURL'));

    }).done(function() {

        new juicebox({
            containerId: 'juicebox-container',
            splashImageURL : splash
        });

    }).fail(function() {

        alert('Cannot fetch image for Splash Page.');

    });

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

@rj74

Although, historically, we have released hotfix versions before, I think we are probably too far down the path with regard to preparation for the next version to release a hotfix version to fix only this problem at this point in time.

As you are aware, Facebook uses the data from Open Graph meta tags to populate the share window.
The thumbnail image displayed in the Facebook share window is determined by the og:image tag and this image is used no matter what image is displayed in the gallery. (You can think of this image as representing the gallery as a whole.)
The og:image tag cannot be modified client-side using JavaScript when a new image is selected (at least not so that it will be picked up by Facebook) so your server-side solution to dynamically create a web page with an appropriate og:image entry is certainly a suitable workaround.

If using #5 in a URL (for example), then the 5th image in the gallery should initially be displayed in Mobile Safari on iOS devices (and on all other mobile browsers) as long as:
(1) The Splash Page is not used.
(2) Thumbnails are not set to display on load.
You would need to set both showSplashPage="NEVER" and showSmallThumbsOnLoad="FALSE" in order for the # to work in Small Screen Mode.

Unfortunately, modifying the source code is not supported. Please see this FAQ:
Does Juicebox-Pro include the source code?

Just a thought but maybe you could use JavaScript to grab the # value from the URL and then internally set the firstImageIndex configuration option within your gallery's embedding code. This might work better for you.

Without knowing what the errors were, I cannot be sure what might (or might not) need to be changed.
If the Showkase Server Compatibility Test passes OK at the moment, then it is likely that Showkase will run fine with your current settings (but it sounds like your web hosts will help you change anything if necessary).

Please see these FAQs:
How many websites can I use Showkase on?
Does a single domain license cover multiple subdomains?
With a single license, you can have as many separate Showkase sites as you like on a single domain (and all associated subdomains). Just install each Showkase site into a unique folder and each site will be self-contained in its own folder.

Each Showkase site requires a username and password to log in to the admin section (to create or edit pages).
See the Live Demo Admin login page as an example.
Once installed, you can change the username and password in the 'System -> Change Log-in' section.

Opening a Juicebox gallery in a lightbox is certainly possible but might not be easy to implement in a Drupal environment.
First of all, you'd need to include the lightbox script (whichever one you choose to use) in your web page and ensure that the lightbox resource files are in a suitable location on your web server.
If you'd like to see how a Juicebox gallery can be opened in a SimpleModal lightbox, then please see this forum thread.
However, trying to integrate this into a Drupal page might be quite a complex and time-consuming task.

The files used to create the multiple gallery demo pages are not available as a download package. (They are there as an example of what can be achieved rather than a ready-to-use template that users can download and use.)
You would need to view the web page in your browser and go to 'File -> Save Page As...' (in your browser's menu) to save the HTML page.
You would also need to make sure that you downloaded the 'jb.vertical.template.css' CSS resource file that the example uses.
You could then swap the sample galleries for your own and modify the header and footer content if necessary.

Here is an alternative, automated one-page solution that you could try.
First of all, create a few (two or three) sample galleries with JuiceboxBuilder-Lite.
Save them in gallery folders named 'gallery1', 'gallery2', etc.
Now use the code below to create an HTML file (in a plain text editor), name the file whatever you like, place it in the same directory as the gallery folders and open it in a browser.

<!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">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                background-color: #222222;
                margin: 0px;
            }
            #header {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                padding: 10px 0px;
                text-align: center;
                width: 100%;
            }
            #page {
                font-size: 30px;
            }
            #menu {
                padding: 10px 40px 0px 40px;
            }
            #footer {
                background-color: #222222;
                bottom: 0px;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                left: 0px;
                position: relative;
                text-align: center;
                width: 100%;
            }
            #wrap {
                margin: 0 auto;
                width: 80%;
            }
            .gallery {
                cursor: pointer;
            }
            a.gallery:hover {
                color: #888888;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">

            // Initialize Juicebox object variable name
            var jb;

            // Function to process all galleries
            function doProcess(counter) {
                $.get('gallery' + counter + '/config.xml', function(data) {

                    // Build gallery folder name
                    var name = 'gallery' + counter;

                    // Create space between links
                    if (counter > 1) {
                        $('#menu').append($('<span />').html('&nbsp;&nbsp;&nbsp;'));
                    }

                    // Fetch Gallery Title from gallery XML file
                    var title = $.trim($(data).find('juiceboxgallery').attr('galleryTitle')) || 'Untitled';

                    // Fetch Gallery Description from gallery XML file
                    var description = $.trim($(data).find('juiceboxgallery').attr('galleryDescription')) || '';

                    // Add link to Document Object Model and register click handler to run loadGallery and doLayout functions when link is clicked
                    $('#menu').append($('<a />').attr('id', name).addClass('gallery').html(title).click(function() {
                        loadGallery(name, description);
                        doLayout();
                    }));

                    // Initially load first gallery
                    if (counter === 1) {
                        loadGallery(name, description);
                    }
                }).done(function() {

                    // Process next gallery
                    doProcess(++counter);
                }).fail(function() {

                    // Display message if no galleries found
                    if (counter === 1) {
                        $('#menu').append($('<span />').text('No galleries found.'));
                    }

                    // Show header and footer when all galleries have been processed
                    $('#header, #footer').css('visibility', 'visible');

                    // Layout page and resize gallery
                    doLayout();
                });
            }

            // Function to layout page and resize gallery
            function doLayout() {
                var windowHeight = parseInt(window.innerHeight ? window.innerHeight : $(window).height());
                var headerHeight = parseInt($('#header').outerHeight(true));
                var footerHeight = parseInt($('#footer').outerHeight(true));
                var galleryHeight = windowHeight - headerHeight - footerHeight;
                $('#wrap').height(galleryHeight);
                if (jb) {
                    var galleryWidth = parseInt($('#wrap').innerWidth());
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }

            // Function to load gallery, underline selected link and display Gallery Description in page footer
            function loadGallery(base, desc) {

                // Load gallery
                jb = new juicebox({
                    backgroundColor: "#222222",
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "100%",
                    galleryWidth: "100%"
                });

                // Underline selected link
                $('.gallery').css('text-decoration', 'none');
                $('#' + base).css('text-decoration', 'underline');

                // Display Gallery Description in page footer
                $('#description').css('padding', desc ? '10px 40px' : '0px').html(desc);
            }

            // Run following when Document Object Model is complete
            $(document).ready(function() {

                // Enter Page Title here
                var page = "Multiple Galleries";

                // Display Page Title in browser tab
                document.title = page;

                // Display Page Title in page header
                $('#page').html(page);

                // Hide header and footer until all galleries have been processed
                $('#header, #footer').css('visibility', 'hidden');

                // Process all galleries
                doProcess(1);

                // Register resize handler to run doLayout function when browser window is resized
                $(window).resize(doLayout);
            });
        </script>
        <title></title>
    </head>
    <body>
        <div id="header">
            <div id="page"></div>
            <div id="menu"></div>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
        <div id="footer">
            <div id="description"></div>
        </div>
    </body>
</html>

The links to each of the galleries are the gallery titles and the gallery description (Pro only) is displayed below the selected gallery.

(With Showkase, multiple galleries can be listed on Gallery Index Pages without any manual coding at all.)

First of all, please make sure that you are using the current version of Juicebox-Pro (v1.4.4.2) to ensure that any bugs from previous versions are not contributing to your problem.
Full instructions for downloading the latest version and upgrading existing galleries can be found here.

Please also see the two following FAQs which might help.
Why can't I view my gallery on a 3G mobile connection?
My gallery works on 'www.example.com' but not on 'example.com' (or vice versa). Why?

If the suggestions above do not help, then please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Please also let me know what mobile devices and browsers you see the problem in. Thank you.

The website you quoted was created with Showkase-Pro and the Juicebox galleries within the site use certain Pro configuration options which are not available to Juicebox-Lite (the free version. However, you would certainly be able to get a close approximation to these galleries with Juicebox-Lite, though (for example a single row of thumbnails below the main image and a unique caption for each image is certainly possible with Juicebox-Lite).

To see what can be done with Juicebox-Lite and Juicebox-Pro, we have several demo galleries here.
You can download Juicebox-Lite from the download page.

Unfortunately, we do not have a trial version of Juicebox-Pro but we do offer a money-back guarantee. Please see this FAQ for details:
Can I try a trial version of Juicebox-Pro?

With Juicebox, you would be able to create as many individual galleries as you like but you might need to manually embed them into web pages following the instructions here.

If you are looking for an automated solution to creating and listing multiple galleries or a way to create a complete website, then Showkase would be more suitable.

Showkase is a PHP web application which allows you to create a complete portfolio website (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) galleries and the galleries can be created within the application itself in a web browser interface (or created with JuiceboxBuilder and imported).

Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).

Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite and SimpleViewer-Standard, the free versions) or Showkase-Pro (which comes with Juicebox-Pro and SimpleViewer-Pro).
The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.

More information on the differences between Juicebox and Showkase can be found in this forum post.

Hopefully this will answer any queries you may have. If you have any further questions, just let me know and I'll do my best to answer them for you.

When using Showkase, creating and editing pages and embedding galleries is all done automatically within the Showkase interface without the need for any manual coding at all.

Like Juicebox-Pro, there is no trial version of Showkase but, again, we offer a money-back guarantee (as noted in the FAQ below).
Can I try a trial version of Showkase?

As well as the demo Showkase sites on our own site, we have links to other sites created by Showkase users on our Facebook page, in our Twitter feed and in this blog post.

Here are a few things to try. They may not be ideal solutions but they might help to track down the root of the problem.

(1) Try using the suggestion in the Using Percentage Heights support section on your <div id="photo"> container (the gallery's parent container).

(2) Try giving your gallery a fixed pixel height such as 600px instead of a percentage height.

galleryHeight: '600',

(3) Try using a different imageTransitionType to see if the problem happens with transitions other than CROSS_FADE. A short description of the imageTransitionType configuration option and all its possible values can be found in the Main Image section of the Config Options page.

(4) Try viewing the gallery on a page of its own (using the gallery's own 'index.html' page) to see if the problem has anything to do with the code on the embedding page.

(5) Try adding the following line of code to the .htaccess file in your root directory to ensure that browsers are able to cache the image files for your gallery.

Header set Cache-Control "max-age=2592000"

The results of trying these suggestions should hopefully help with troubleshooting the issue.

In a nutshell, you are unable to upload the 'juicebox.js' file to your web server because your web host scans all files with ClamAV and ClamAV thinks (incorrectly) that the file contains malware and immediately deletes it.
Without the 'juicebox.js' file in place, the gallery will not work.

I have done all I can (by filing false positive reports to ClamAV) and hope that ClamAV will exclude the Lite and Pro 'juicebox.js' files from being flagged as malware in a database update very soon.

Unfortunately, unless ClamAV contact me directly (they have my email address) I have no way of knowing if or when this has been done.
Also, without being able to reproduce the problem, I cannot tell if it has been fixed.
I do not have access to a web server that uses ClamAV and the online scanners that use ClamAV seem to give the 'juicebox.js' files a clean bill of health.

Being that your web host updates their ClamAV database several times a day, the best I can suggest is that you periodically try to upload your 'juicebox.js' file to your web server and see if it works. (It should take less than a minute to check.)

If or when I hear anything back from ClamAV, I will be sure to post back in this thread.

From your screencast video, your gallery settings look OK (although there should be no need to explicitly set imageScaleMode="SCALE_DOWN" as this is the default value for this option)
Without actually being able to see your gallery live on your web server, my best guess as to the cause of the problem is that some CSS code (perhaps from your theme) may be affecting your gallery. For example, if there is some global CSS somewhere on your page which is being applied to all images on the page, then it will affect the images in the gallery, too. You might need to track down this CSS and ensure that it is applied to only these elements on your web page that actually require it.

To see if this is the case, try temporarily reverting to a default WordPress theme (such as Twenty Sixteen) to see if this solves the problem.
If it does, then you could go back to your current theme and check, using your browser's developer tools (usually accessible via the F12 key), to see what CSS is being applied to the images in the gallery.

It is not possible to isolate a Juicebox gallery (or any other HTML element) from global CSS and the gallery has no option but to inherit such rules.
The best course of action would be to have CSS rules applied to only those elements on your web page which require them through use of further CSS selectors (classes and ids).

I hope this points you in the right direction.

If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. Thank you.

If you want to display two divs side by side, you could wrap then in a container div and float one of them left and the other one right.

To see this in action, create two sample galleries with JuiceboxBuilder-Lite.
Save one gallery in a folder named 'gallery1' and the other in a folder named 'gallery2'.
Now create a new HTML file with the code below, name it whatever you like, place it in the same directory as the two gallery folders and open it in a browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Juicebox-Pro Gallery</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #wrapper {
        width: 100%;
    }
    #juicebox-container-1 {
        float: left;
    }
    #juicebox-container-2 {
        float: right;
    }
    </style>
</head>
<body>
    <script src="gallery1/jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        baseUrl: 'gallery1',
        containerId: 'juicebox-container-1',
        galleryWidth: '50%',
        galleryHeight: '100%',
    });
    </script>
    <script>
    new juicebox({
        baseUrl: 'gallery2',
        containerId: 'juicebox-container-2',
        galleryWidth: '50%',
        galleryHeight: '100%',
    });
    </script>
    <div id="wrapper">
        <div id="juicebox-container-1"></div>
        <div id="juicebox-container-2"></div>
    </div>
</body>
</html>