Hi Steven,

Thanks for looking into this. I think I've found a workable solution and I've now implemented it with a gallery embedded onto our blog: https://www.charleychau.com/blogs/blog- … le-of-bute

I changed the settings for:

• Expand in New Page to FALSE as you suggested

• Show Splash Page to NEVER

It means that the gallery loads on mobile like this:

And when a user clicks a thumbnail the image is displayed like this:

I've checked this over on mobile, iPad and desktop and it all looks like it works fine with one tiny exception - highlighted in the red box on the image below:

The thumbnail view icon is partially obscured when viewing an image on mobile in portrait orientation. It's not a massive problem but if you know of a way to re-align it then I would be grateful.

Thanks,
Christine

Hi,

Thanks for the quick response.  It's not purely an issue on width, I need a fully responsive gallery to embed on our site that is hosted by Shopify.

Unfortunately I am not technically capable in any way shape or form and yesterday had a real struggle even getting to the point where I set up a subdomain with web space to host the gallery, and then work out the FTP situation so just getting to a point where I had a vaguely working gallery was a miracle frankly.

Back to what you suggested ...

Setting the width at 100% using inline CSS

I have set the width to 100% as you suggested and it looks fine on load when viewed on mobile portrait as shown here: http://gallery.charleychau.com/screensh … n-load.png

If the user then flips the mobile device to a landscape view the gallery is displayed at 100% width as you would expect as shown here: http://gallery.charleychau.com/screensh … dscape.png

BUT if the user then rotates their screen back to portrait view on mobile, the screen is not re-sizing properly, as shown here: http://gallery.charleychau.com/screensh … tating.png and you can see the header of the website has been distorted.

Is there something I can do to resolve this problem?

Using baseURL option

I am not technical in the slightest but I found the .htaccess file. The existing code in the .htaccess file was:

CheckSpelling Off
AddType x-httpd-php56 .php

So I simply added the line of code that you suggested so that the code in the file is now:

CheckSpelling Off
AddType x-httpd-php56 .php
Header add Access-Control-Allow-Origin "*"

And I uploaded it via FTP to the server where the gallery is hosted which is a subdomain of charleychau.com: gallery.charleychau.com and hosted on a standalone webserver that I set up yesterday specifically because of trying to use Juicebox.

I then embedded the code that you suggested in a web page on our main website at charleychau.com which is hosted by Shopify on different servers and I do not have full control of the Shopify servers.

But the gallery does not display: https://www.charleychau.com/pages/test-gallery-2

And has an error message “Juicebox Error: Config file not found”.

What has gone wrong?

Sorry if I am asking silly questions but I’m not technical and I bought Juicebox Pro because it says on the home page of your site: “Use Juicebox to create spectacular HTML5 image galleries for your web site with no coding required. Juicebox is simple to set up and use, and includes complete browser and mobile device support.”

It would be great if I can get something working correctly here otherwise I think we’re going to have to give up with Juicebox.

Thanks!