Try fixing the HTML errors on your web page. (There are not too many so it should not take long but the errors that currently exist may be causing problems.) Different browsers may be more tolerant towards errors than others.
This may or may not help but, even if it does not, once the errors are fixed, your web page should be rendered with greater predictability and consistency across different browsers and we can then eliminate HTML errors as being a possible cause of your problem.
You can check the code on your web page using the W3C Markup Validation Service and then fix the errors reported.

Also, rather than load your gallery into an iframe whose dimensions look to be set dynamically by JavaScript, you might like to try embedding your gallery directly into your web page by following the baseUrl embedding instructions here.

You could also check to see if your problem happens just in Mobile Safari or in Chrome, too.

This sounds like you may be viewing your gallery over a 3G/4G connection (rather than wi-fi). If this is the case, then please see this FAQ which has a solution: Why can't I view my gallery on a 3G mobile connection?

WP-Juicebox allows you to configure a Juicebox gallery using any or all of the configuration options available here.
All Lite options have individual controls within the plugin's interface and Pro options can be entered into the Pro Options text area, one per line, in the form optionName="optionValue".

If you have created a gallery with JuiceboxBuilder-Pro and want to embed it into a WordPress post, then you could either:
(1) Recreate the gallery using WP-Juicebox and copy and paste the options from the gallery's XML file into the Pro Options text area.
... or:
(2) Do not use WP-Juicebox and, instead, use the baseUrl method of embedding as documented here.
Essentially, you would create a Juicebox-Pro gallery on your computer with JuiceboxBuilder-Pro, upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress post making sure that the method of entry is 'Text' rather than 'Visual'.
It does not matter where on your web server you upload your gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.

That seems strange. I would expect that JuiceboxBuilder-Pro resizes images and thumbnails using similar rescaling algorithms and techniques and all metadata is stripped out of both images and thumbnails during the resizing process.
Also, the main images and thumbnails are both displayed in the gallery using (dynamically-generated) standard HTML <img> tags.

Are you allowing Juicebox-Pro to resize your images or have you deselected the 'Resize Images' checkbox (in which case JuiceboxBuilder-Pro would just copy your original images to the gallery's image's folder)?

If you see the problem in only certain browsers or devices, then it sounds like it might be an ICC Color Profile problem.
It sounds like your images may have ICC Color Profiles embedded within them and that JuiceboxBuilder-Pro is not resizing them. This would result in images which retain their ICC Color Profiles and thumbnails which have the ICC Color Profiles stripped out. This might account for the differences between the two sets of images.

There are no color settings within JuiceboxBuilder-Pro (and no way to force JuiceboxBuilder-Pro to retain metadata in resized images or thumbnails) so to ensure that the images and thumbnails look the same, you might need to either:
(1) Allow JuiceboxBuilder-Pro to resize you images.
... or:
(2) Create your own set of thumbnails with your ICC Color Profile. This should result in your images and thumbnails always matching each other but perhaps not always being displayed consistently across different browsers (which may or may not support ICC Color Profiles).

It is usually recommended that images intended for the web should be saved as sRGB.
Please check to see if your images are saved as such.

If Page Composer replaces the default WordPress editor (TinyMCE) in the backend with a third-party alternative, then WP-Juicebox will not be compatible with it. (WP-Juicebox will have no knowledge of the editor or how to insert a shortcode into the editor's content.)
WP-Juicebox should work fine with all variants of the CKEditor/FCKEditor and TinyMCE editors.

If you are still using the default WordPress editor but the problem remains, I would be happy to investigate further. However, if the plugin you are using is Visual Composer, it is not free and I am unable to download it to examine its source code and to try to replicate the problem for myself. Therefore, I would need access to your web server and WordPress installation to see the problem for myself and to try to figure out what is causing it. If you are agreeable to this, please let me know and I will email you with an address where you can send me your FTP and WordPress login details.

This issue has now been logged as a bug and it will hopefully be fixed in the next version (although I do not know when it will be released). Unfortunately, I do not know of a workaround at the moment.

With Juicebox, you can create as many individual galleries as you like but you would need to link them together manually (as you are currently doing) using techniques such as those in the Embedding Multiple Galleries support section.
Juicebox-Pro does not come with any automated method of linking together multiple galleries.

You could perhaps use the solution from this forum thread whereby thumbnails are turned into links to different gallery pages (so a single gallery gallery could act as an index to other galleries) but please bear in mind that Juicebox was not designed with this in mind and you may run into unforeseen problems (and it may take just as much maintenance as your current method).

An alternative solution would be to use another one of our products: Showkase.
Showkase is a PHP web application which would allow you to create a complete portfolio web site online using a web browser interface.
Showkase has full support for Juicebox-Pro and the galleries can be created within the application itself (or created with JuiceboxBuilder-Pro and then imported into Showkase).
You can create gallery index pages and have as many galleries listed on each index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
(Showkase also has the ability to create non-gallery pages such as 'About', 'Contact' and 'Basic' pages where you can enter information about yourself and contact details.)

All of this is done automatically within the interface without the need for any manual coding at all.
If you would like to take a look around the Showkase interface, you can log into the Live Demo Admin here.

Demo sites can be found here and a sample Gallery Index page can be found here.

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.
As you already have Juicebox-Pro, you could purchase Showkase-Standard and upgrade it to use your Juicebox-Pro files by following the instructions here.

I hope you find this information useful.

You can create a gallery manually (using the 'web' gallery from the download zip package as a template) by following the instructions here (with no need to use JuiceboxBuilder-Pro).
You can then embed the gallery into a web page by following the instructions here.

When creating a gallery manually, you would normally list the images to be displayed in the gallery using <image> tags in a static XML file. However, you could dynamically generate the gallery's XML file with a server-side scripting language. An example of how this could be achieved can be found in this forum post. It uses PHP to display all images in a designated folder. However, you could use a different scripting language and could pull in image URLs from a completely different source if you like. As long as your gallery's XML file uses the correct format (see the 'web/config.xml' file for an example), the images should display fine.

This will work equally well with both Juicebox-Lite (the free version) and Juicebox-Pro so you could try it out with Juicebox-Lite before purchasing Juicebox-Pro.
Juicebox-Lite can be downloaded from this web page.

I hope this helps.

Your gallery is embedded into your photogallery_Miami2014.html web page but there is no og:image meta tag in that web page.
Add an og:image meta tag (such as the one in my post above) to the <head> section of your photogallery_Miami2014.html web page pointing towards an image you would like to use for the sharing window (using an absolute URL) and the image should be used by Facebook.

It looks like I was editing my first post whilst you were posting your reply.

This is normal. The shape of your gallery changes (when the browser window's dimensions change) but the shape of your image does not.

If you want the image to fill the gallery's image area without cropping, then the shape of the image must match the shape of the gallery's image area. Otherwise, the image will be cropped (if you want to fill the image area) or space will be introduced (if you want the image to be scaled to fit within the image area without cropping).
The only way to ensure that the shape of the gallery's image area matches the shape of your images is to control the gallery's dimensions (either by fixing the gallery's dimensions using absolute pixel values or by assigning new dimensions to your gallery using JavaScript whenever the browser window is resized).

This would certainly be another option.

In your case (with a two column layout), you do not want the gallery's width to be a percentage of the entire window width (which you currently use) but rather it should always be 100% of its parent container's width.
Try changing:

var galleryWidth = parseInt(windowWidth * 0.425);

... to something like:

var galleryWidth = parseInt($('#article').width());

Hopefully this will help.

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

If your gallery is responsive and its dimensions change depending on the size of the user's browser window, then you essentially have no control over the size and shape of your gallery. Juicebox will, by default, scale images to fit within the gallery's image area (no matter what its size), respecting their aspect ratios and without cropping. If the aspect ratio of the image does not match that of the gallery's image area, then there will be space to the top and bottom or to the left and right of the image.
The easiest ways to avoid this would be to:
(1) Use absolute pixel values (rather than percentages) for the gallery's dimensions and make sure that the aspect ratio of the gallery's image area matches that of the images themselves.
... or:
(2) Change the imageScaleMode (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) to a value such as 'FILL' so that Juicebox always fills the image area (although please note that cropping may occur).

A further option would be to allow your gallery's dimensions to scale (when the browser window's width changes) but for its aspect ratio to always remain the same. This would require some JavaScript code to resize the gallery, maintaining its aspect ratio when the browser window is resized. (This would not ordinarily happen. If you change the width of your browser window, a div on a web page may have its width altered but not its height.)
Try the following.
Create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' page.

<!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;
            }
            #wrap {
                width: 100%;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb;
            function doLayout() {
                var windowWidth = parseInt(window.innerWidth ? window.innerWidth : $(window).width(), 10);
                var galleryWidth = parseInt(windowWidth * 0.8, 10);
                var galleryHeight = parseInt(galleryWidth / 2, 10);
                $('#wrap').width(galleryWidth);
                $('#wrap').height(galleryHeight);
                if (jb) {
                    jb.setGallerySize(galleryWidth, galleryHeight);
                }
            }
            $(document).ready(function() {
                $(window).resize(doLayout);
                jb = new juicebox({
                    containerId: "juicebox-container"
                });
                doLayout();
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

The '0.8' value is just an arbitrary width for the gallery (80%) for this example. You can change this to whatever you like.
The aspect ratio in the above example is 2:1 (set by the '2' in the line var galleryHeight = parseInt(galleryWidth / 2, 10);).
Again, you can change this to whatever you like.
I hope this points you in the right direction and that you are able to implement a suitable solution into your own web page.

There are no Open Graph tags in the demo gallery you quoted but JuiceboxBuilder-Pro already supports this.

When you create a Juicebox-Pro gallery with JuiceboxBuilder-Pro, Open Graph tags are included in the gallery's 'index.html' file.
The tags will looks something like this.

<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="Gallery Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="Share Url" />
<meta property="og:image" content="Share Url/images/IMG_1116.jpg" />
<meta property="og:description" content="Gallery Description" />
<!-- END OPEN GRAPH TAGS-->

og:title uses the Gallery Title ('Customize -> Lite').
og:url uses the Share Url ('Customize -> Sharing').
og:image uses the Share Url and appends the relative path to the first image in the gallery.
og:description uses the Gallery Description ('Customize -> General').