If the width of your iframe is of concern, then you could try giving your iframe a width of 100% (either via the 'width' attribute or inline CSS):

<iframe src="https://www.gallery.charleychau.com/test-gallery/index.html" width="100%" height="600" frameborder="0" scrolling="no"></iframe>

<iframe src="https://www.gallery.charleychau.com/test-gallery/index.html" height="600" frameborder="0" scrolling="no" style="width: 100%;"></iframe>

It the layout of your gallery page is the problem, then you're seeing the thumbnail page of Small Screen Mode for the following reasons:
(1) Small Screen Mode is used by default on mobile devices.
(2) When a gallery is embedded with dimensions of 100% x 100% on a page of its own (with no other content), then the Splash Page is not used (and the thumbnail page is the first thing you'll see in Small Screen Mode). Your gallery fits this description as it is embedded full-page in 'index.html' on your 'charleychau.com' domain.

As you have uploaded your gallery to a regular web server which you seem to have control over, perhaps the best option would be to embed your gallery using the baseUrl method (using absolute paths) and ensure that you set up a CORS (cross-origin resource sharing) solution. More information about CORS can be found here.
Normally, trying to embed a Juicebox gallery hosted on one domain and whose embedding code is on another will not work due to the Same-Origin Policy.
However, if you add the following code to an '.htaccess' file in the root directory of your 'charleychau.com' domain (where your gallery is hosted):

Header add Access-Control-Allow-Origin "*"

... then you should be able to replace the iframe in your Shopify page with the following code to embed your Juicebox gallery directly into your Shopify page:

<!--START JUICEBOX EMBED-->
<script src="https://www.gallery.charleychau.com/test-gallery/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl: "https://www.gallery.charleychau.com/test-gallery/",
    containerId: "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "600",
    backgroundColor: "#222222"
  });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this works for you.

First of all, I would try to embed the gallery directly into the web page that you want the gallery to appear in.
This should prevent you from having to deal with iframe problems on mobile devices.

Next, if your Shopify page is actually on your own domain (the same domain where your gallery folder has been uploaded to), then there should be no need to use a CORS solution. You should be able to just use the regular embedding code (or the baseUrl embedding code if you have uploaded the entire gallery folder rather than just its contents).

This is because you've uploaded the .htaccess file to gallery.charleychau.com but the paths in the embedding code point towards www.gallery.charleychau.com (note the different 'www' subdomain). (When I posted the code above, I just copied the path from the 'src' attribute of your iframe.)

Try changing the two paths in your embedding code from www.gallery.charleychau.com to just gallery.charleychau.com.

Alternatively, if you have direct access to the charleychau.com web space, then there is no need to have created a 'gallery' subdirectory (and it is probably just complicating matters).

If you can, upload your complete 'test-gallery' folder to the root directory of your charleychau.com domain and use the following embedding code in your 'test-gallery-2' page.

<!--START JUICEBOX EMBED-->
<script src="/test-gallery/jbcore/juicebox.js"></script>
<script>
  new juicebox({
    baseUrl: "/test-gallery/",
    containerId: "juicebox-container",
    galleryWidth: "100%",
    galleryHeight: "600",
    backgroundColor: "#222222"
  });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

This should hopefully be all that is required to allow the gallery to work when users visit either charleychau.com or www.charleychau.com.

I'm pretty sure this is a Cross-Origin issue. I've been able to replicate the problem myself in a test scenario but, unfortunately, I've been unable to find a good solution.

Normally, your gallery is hosted on gallery.charleychau.com but is displayed on charleychau.com.
However, when the gallery is expanded from the Splash Page, it is displayed via the 'full.html' page within the 'jbcore' folder on gallery.charleychau.com (swapping the domain on which the gallery is being displayed). To complicate matters, Juicebox passes configuration options to the 'full.html' page via a session cookie.

I've tried adding the following line to the .htaccess in my test scenario file to add cookie support to the CORS solution.

Header set Access-Control-Allow-Credentials true

... and I've tried adding the full .htaccess file:

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Credentials true

... to both domains (in theory to allow access in both directions) but it does not work.

The only thing I've been able to think of would be to set expandInNewPage="FALSE" to prevent the gallery from being displayed via the 'full.html' page when it is expanded from the Splash Page. The gallery will then be expanded on top of the embedding page (still on the charleychau.com domain) which may cause a scaling problem on iOS devices. (Expanding the gallery on a page of its own is designed to avoid this potential scaling issue.) It's certainly worth a try, though.
Alternatively, you could keep expandInNewPage="AUTO" and lock the viewport of your gallery's web page.
Please see the Expand Gallery Behavior support section for details.

I hope this is a suitable workaround for your problem (as it seems to work well in my test scenario).

I'm glad you've been able to find a suitable workaround. Thank you for letting me know.
With regard to you Button Bar issue, this looks like it might be caused by a known bug where the Button Bar does not always wrap correctly when there is insufficient space for all the buttons. The developers are aware of this issue and it should hopefully be fixed in the next version. In the meantime, it might help to change the size of the Button Bar icons via buttonBarIconSize (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section). The default value is 20 so you could try using a slightly smaller or larger value. Hopefully this will help.

Sorry, our posts crossed and I saw your last response after I had posted my last one. I've re-sized the buttons and that has worked. Perfect.

Thanks again.

Christine