Make sure that all the container's of your gallery have heights specified via CSS.
Your gallery is currently nested within the 'Container', 'background' and 'master' divs but only the 'Container' div has been given a height.
For example, try adding the following code to the CSS section of your web page:

#background, #master {
    height: 100%;
}

Juicebox does not scale thumbnail images (it crops them instead) and your problem arises from your WordPress installation creating and using thumbnail images of 130px x 120px and your gallery using settings of thumbWidth="81" and thumbHeight="64".
Workarounds would be to either:
(1) Set the thumbWidth and thumbHeight configuration options to the same dimensions as your WordPress Media Library Thumbnail Size.
... or:
(2) Change the WordPress Media Library Thumbnail Size (in the 'Dashboard -> Settings -> Media' section) to the same dimensions as your thumbWidth and thumbHeight configuration options.

If you are using the BulletProof Security plugin, you will need to add a bypass rule to your root .htaccess file to allow WP-SimpleViewer to function correctly.
Add the following code to your root .htaccess file:

# Juicebox skip/bypass rule
RewriteCond %{REQUEST_URI} ^/wp-content/plugins/wp-juicebox/ [NC]
RewriteRule . - [S=13]

If you are not using the BulletProof Security plugin, then try deactivating all your installed plugins other than WP-Juicebox and re-activate them one by one (checking your WP-Juicebox functionality after each one) to see if you can find a conflict.

It looks like the CSS of your WordPress theme may be conflicting with the CSS of the Juicebox gallery.
If there are any general CSS rules on the web page which apply to all divs or to all images, then they will also apply to all divs or to all images within the Juicebox gallery.
Try temporarily reverting to the default WordPress theme to see if this makes a difference.

You could initially hide the main image by adding the following to the CSS of your main page into which the gallery is embedded:

.jb-dt-main-frame { visibility: hidden; }

... and then, using the API onImageChange(id) method and JavaScript, set the visibility to 'visible' when a thumbnail is clicked.

Make sure that you are entering the data into the correct fields in Photo Mechanic.
When using Photo Mechanic to add IPTC data to your images, JuiceboxBuilder-Pro takes the 'IPTC Caption' from Photo Mechanic's 'Caption' field and the 'IPTC Title' from Photo Mechanic's 'Object Name' field.

Try validating your web page with the W3C Markup Validation Service and fix the errors reported (there are currently 7 errors and 2 warnings on the page).
Although most of the problems seem to be trivial, once your page's code validates against the Doctype Declaration you use, it should be rendered with greater consistency across different browsers.
Please see here for more information about Juicebox and Doctypes.

If you continue to experience difficulties, try temporarily removing your own custom CSS (the 'base.css' and 'gallery.css' files) from your web page to see if this makes a difference.

Also, your gallery has entries such as:

imagePadding: '10px',

Juicebox expects a numeric value for such configuration options so try using:

imagePadding: '10',

... instead.

In order to embed a Juicebox gallery in any web page, you will need to be able to do two things:
(1) Upload your gallery folder to a web server
(2) Insert HTML embedding code into the web page

Please check with Opencart support to see if they allow you to upload files and folders to the web space that they provide.
If they do not, you would need to find an alternate host for your Juicebox-Pro gallery, such as Dropbox.
Please see this forum thread for instructions on how to upload a Juicebox-Pro gallery to Dropbox.

If using Dropbox, you would then need to insert an iframe (documented as Option #2 here) into your Opencart web page.
Again, please check with Opencart support to see if they allow the use of iframes in their web pages.

@pshaw257

No. Juicebox is fully compatible with Chrome (and all other major browsers).

Juicebox can be embedded in an iframe by following the instructions (Option #2) here.

If you continue to experience difficulties, please post the URL to your web page so that I can take a look and help further.

Absolute URLs such as http://www.example.com/images/ will work only when your gallery has been uploaded to a web server.
Until such time, you could use relative URLs in your embedding code (as you did originally) but you would need to make sure that they are relative to the web page containing your gallery's embedding code.
Alternatively, you could try using URLs with a leading slash to denote your root directory, for example:

<!--START JUICEBOX EMBED-->
<script src="/joomla/juicebox_gallery/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container",
baseUrl : "/joomla/juicebox_gallery/",
galleryWidth: "90%",
galleryHeight: "90%",
backgroundColor: "rgba(51,51,51,0)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Please see this FAQ which may help:
When I view my gallery, I see a blank area. Why?

In a Joomla environment, it can sometimes be difficult to know where the page containing your gallery's embedding code actually exists on your web server and, therefore, it would be difficult to point to your gallery folder using a relative URL.
Try using absolute URLs instead, for example:

<!--START JUICEBOX EMBED-->
<script src="http://www.example.com/images/jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container",
baseUrl : "http://www.example.com/images/",
galleryWidth: "90%",
galleryHeight: "90%",
backgroundColor: "rgba(51,51,51,0)"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... changing the two instances of 'www.example.com' in the above example to your own web domain name.

If you continue to experience difficulties, please post the URL to your web page so that I can take a look and help further.