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').

@marcelbuechel

I understand your request for JuiceboxBuilder to accept images with filenames that contain special characters but the image filenames become part of URLs when they are uploaded to a web server and it would be wise to use only web-safe characters in filenames for this reason. Please see section 2.3 of this document for details.

JuiceboxBuilder currently handles all images whose filenames use any or all of these characters.

When expanding a Juicebox-Lite gallery, the main image used in the expanded gallery is exactly the same one that is used in the normal (unexpanded) gallery - the image defined by the imageURL in the gallery's XML file.
Also, in Juicebox-Lite, the imageScaleMode configuration option is set its default value of SCALE_DOWN. This will dynamically scale down large images to fit within the gallery's image area but will not scale up smaller images.
Therefore, the images in your gallery should be large enough to fill the image area in the expanded gallery. In the normal (unexpanded) gallery, Juicebox will just shrink them down a bit to fit (your images will not be cropped).

If you were to purchase Juicebox-Pro, you would be able to change the value of imageScaleMode to SCALE_DOWN, SCALE, FILL, STRETCH or NONE. Descriptions of these values can be found in the Main Image section of the Config Options page.
Also, with Juicebox-Pro, you would be able to have a Multi-Size Image gallery whereby you would be able to have three different image sizes in your gallery and Juicebox would determine the best image size to be displayed depending on the device, browser window size and whether or not the gallery is expanded. For example, in Large Screen Mode, 'medium' images would be used in the normal (unexpanded) gallery and 'large' images would be used in the expanded gallery. (You can choose the dimensions for all three image sizes in JuiceboxBuilder-Pro.) For more information about Multi-Size Image Support, please see this blog entry.

The Lite Embedded demo gallery's 'config.xml' file can be found here (although the information above may be more useful):
http://www.juicebox.net/demos/lite/full/config.xml

The maxThumbRows and maxThumbColumns configuration options are used only in Large Screen Mode when the thumbnails and main images are displayed on the same page. In Small Screen Mode, the number of thumbnails displayed is determined by the size of the browser window and the thumbnails themselves.

Whether you expand the original gallery when a thumbnail is clicked or use a click handler on the thumbnails to load a new gallery displaying the selected image, you will still have the problem of the original gallery changing from the thumbnail page to a main image page. (It sounds like you want the thumbnails to act as links and to always be displayed as thumbnails on your main web page). Unfortunately, Juicebox was not designed to allow thumbnails to be used as links.

It sounds like one possible solution might be to create your own thumbnail links on your web page and link directly to corresponding images in a gallery by setting enableDirectLinks="TRUE" ('Customize -> General') and using URLs such as: http://www.example.com/gallery/#2 (for example, to display the 2nd image in the gallery).