@tejas.rana

Please see my reply to your query in this forum thread.

I was aware that Lightroom web engines folders (such as 'juicebox.lrwebengine') are regular folders on a PC but are seen as special packages on a Mac. I had a hunch that .app folders might be treated similarly and Googled to confirm it.
If you hadn't mentioned "There is a file /Applications/JuiceboxBuilder-Pro.app", I wouldn't have thought of it.
It always helps to have as much information as possible (even stuff that you think might not be relevant) so thank you for being so comprehensive with your problem descriptions!

You're welcome!
I'm glad it worked. Thank you for posting back to let me know.

I'm glad you've essentially found what you're looking for.
Thanks for sharing your findings and experiences.

I'm still not sure why searching your hard drive for 'spinner.gif' does not result in a hit for the location of JuiceboxBuilder-Pro's 'jbcore' folder though, especially after you have shown hidden file (although it sounds unlikely that, on a Mac, JuiceboxBuilder-Pro would be installed to a location which is hidden by default).

OK, please do!

You can rename (or relocate) a gallery's XML file and point towards it using the configUrl option in the embedding code.

For example, you could have 2 galleries. The 1st gallery's XML file could be named 'config1.xml' and the 2nd gallery's XML file could be named 'config2.xml'.
The embedding code for the galleries might look something like this:

<script src="jbcore/juicebox.js"></script>

<script>
    new juicebox({
        containerId: "juicebox-container-1",
        configUrl: "config1.xml",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container-1"></div>

<script>
    new juicebox({
        containerId: "juicebox-container-2",
        configUrl: "config2.xml",
        galleryWidth: "800",
        galleryHeight: "600",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container-2"></div>

Please note that when embedding multiple galleries into a single HTML page, you should load the 'juicebox.js' file only once per page (rather than once per gallery).
Also, be sure to embed each gallery into a unique container (a <div> with a unique 'id').

Please see the Embedding Multiple Galleries support section for online examples.

Alternatively, instead of saving all your gallery XML files in the same directory, you could keep all your galleries separate in their individual folders, upload the complete folders (not just the contents) to your web server and embed the galleries using the baseUrl method as documented here.

Short descriptions for the configUrl and baseUrl configuration options can be found here.

The 2 most likely causes are:

(1) A conflicting plugin.
(2) Custom CSS code on your web page (from either your theme or another plugin) which the gallery is inheriting and which is interfering with the gallery display.

First of all, try disabling all plugins (other than WP-Juicebox) and re-enable them one by one (checking your gallery's display after each one) to see if you can find a plugin which is causing your problem.

Also, try temporarily reverting to a default WordPress theme (such as Twenty Sixteen) to see if this solves the problem.

You could also use your browser's developer tools (usually accessed via the F12 key) to see if you can figure out why there is a black box where the gallery should be.

I hope these notes help.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.

I'm glad to hear that a reboot seems to have solved your problem.
Just to clarify, there is nothing that you have to do before going to the Customize tab (or skipping it and going straight to Publish).
Hopefully you'll not encounter this strange problem again.

Unfortunately, I am not familiar with Adobe Flash HTML5 Canvas documents but it might help to think of a Juicebox gallery as a complete self-contained web site. A Juicebox gallery is essentially a web page ('index.html') with many resource files (CSS, JavaScript, images, fonts, etc.).
If you can load a web page (or a small self-contained web site) into an Adobe Flash HTML5 Canvas document, then you should hopefully be able to load a Juicebox gallery (via the gallery's 'index.html' page).
This would be more like loading a gallery's 'index.html' page into an iframe than actually embedding the gallery into an existing web page by following the regular embedding instructions here. (The gallery is actually embedded into the 'index.html' page with the required embedding code. There is just nothing else on the page.)
I'm not sure if this will help (or if what you are trying to do is even possible) but it might at least point you in the right direction.

Setting the security level to 'High' in Internet Explorer disables JavaScript ('Security Settings -> Scripting -> Active scripting').
Juicebox requires on JavaScript to work. This is mentioned in the banner at the top of our home page.

Disabling JavaScript will prevent the gallery from being displayed. There is no way around this.

The only alternative would be to include SEO content code (generated by JuiceboxBuilder-Pro) in your web page. Please see the Search Engine Optimization (SEO) support section for details.

Try viewing this demo gallery (which includes SEO content code) as an example. If JavaScript is enabled, then the gallery will be displayed. If JavaScript is disabled, then the gallery images will be displayed in a vertical list along with the image titles and captions.
http://www.juicebox.net/demos/pro/sharing/

If you are referring to the Splash Page image (the image that you tap to expand the gallery in Small Screen Mode), then, by default, Juicebox uses the first image image the gallery and center-crops it to fit the gallery area. The first image in the gallery itself (after the Splash Page is tapped) is not cropped. It is displayed in its entirety with its aspect ratio respected.

You could set a specific image for the Splash Page (perhaps more appropriate to the aspect ratio of your gallery) via the splashPageUrl ('Customize -> Splash Page') configuration option.

Otherwise, you could choose to not use the Splash Page by setting showSplashPage="NEVER", in which case, visitors to your web site will initially be presented with the thumbnail page. If you wanted to, you could then set showSmallThumbsOnLoad="FALSE" ('Customize -> Thumbnails') to initially display the first image in the gallery instead of the thumbnail page.

For reference, a list of Splash Page configuration options can be found here.

Many thanks for the screenshots.

Out of interest, could you please check to see if the same problem occurs with either of the following full page demo galleries. (That way, we can use one of our own galleries as a test case without relying on your own URLs.) Thank you.
http://www.juicebox.net/demos/lite/full/
http://www.juicebox.net/demos/pro/full/