Topic: Splash page issue on Google Drive as web space

<http://schreiner-family.net/at/2014/index.html> switches between several embedded galleries. This works just fine if there is no splash page, or with a splash page if it is NOT hosted on Google Drive.

However, the site is actually hosted on Google Drive, i.e., the URLs are quite lengthy.

If there is a splash page (e.g., when the site is viewed from an iPhone, or if ALWAYS is set for displaying the splash page) and the splash button is clicked, Google (i.e., the web host) responds with error 400 and complains about an ill-formed request.

I'm afraid the request originates in JuiceBox's code...

Re: Splash page issue on Google Drive as web space

I have just tried embedding a gallery on Google Drive at less than 100% x 100% (at a fixed size of 600px x 400px) in a web page setting showSplashPage="ALWAYS" and trying both expandInNewPage="FALSE" and expandInNewPage="TRUE". The gallery expands correctly in both scenarios on my iOS device and in desktop browsers.
Here it is with expandInNewPage="AUTO":
https://7e149673cba79128b4d3fe7ac7a9b89 … index.html

I get an error 400 when trying to switch galleries on your web page (as well as when trying to expand a gallery from the Splash Page) so I think the problem might have something to do with the code on your web page and the way that your galleries are embedded or loaded.

As the problem happens when clicking one of your gallery links, you should have more control in debugging the switching of your galleries than the expanding of the Splash Page (although, being that the error messages are the same for both scenarios, they might be related to each other).

I would try debugging your web page's JavaScript code to ensure that all your variables are set as you expect them to be.
This should hopefully help to track down the cause of the problem.
After setting a variable but before using it, use a JavaScript alert box to check its value to see if it is what you expect it to be or if it is perhaps undefined for some reason (maybe due to a limitation in using Google Drive rather than a regular web server).
Check that everything is OK before running your new juicebox(content.options); line of code.

I would also try stripping back your custom JavaScript code so that only basic functionality exists.
You could then reintroduce elements, one at a time, to see if you can find the cause of the problem.

I realise that this does not directly solve your problem but I hope it at least points you in the right direction.

You might also like to look into the possibility of hosting your web site on a regular web server rather than on Google Drive.
Juicebox does not require any special server requirements so most web hosts (even those offering free web space) should be suitable.

Re: Splash page issue on Google Drive as web space

I traced things a bit (hard to do because your code is obfuscated):

The error 400 happens in response to your code loading jbcore/full.html once the button on the splash page is pressed.

If I use the relevant URL directly, I get a complaint that there is no config.xml (and indeed, there is not).

Which means that your code loads full.html and config.xml relative to two different base directories.

Once the error 400 has happened, Safari appears to cache the response and the error appears all over.

I'll simplify my code but I can't see how my code can corrupt a URL generated by your code.

Re: Splash page issue on Google Drive as web space

If I use the relevant URL directly, I get a complaint that there is no config.xml (and indeed, there is not).

That's to be expected (on Google Drive or any other host). The 'full.html' file is for Juicebox's own internal use only (when a gallery is expanded in a new page of its own) and may not display the gallery when accessed directly (depending on the gallery's structure).

However, trying to access the 'full.html' page directly might actually be quite a good test.
This essentially takes Juicebox out of the equation. All we are trying to do is access an HTML file directly.
The HTML page should still be rendered by the browser (displaying the 'Config XML file not found.' message).

In my own gallery, going directly to the 'full.html' page in Mobile Safari on an iOS device:
https://7e149673cba79128b4d3fe7ac7a9b89 … /full.html
... displays the page (with the 'Config XML file not found.' message) as expected.

However, going directly to the 'full.html' page in your gallery in Mobile Safari on an iOS device:
https://3fd620ce7dd6a53cea4c9215317f4dd … /full.html
... displays the error 400.

Here are a few things to try.
(1) Change the content of the 'full.html' file (temporarily) to something like the following which has nothing at all to do with Juicebox and try to access the file directly in Mobile Safari to see if the same problem happens.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
</head>
<body>
    <div id="test">Test text.</div>
</body>
</html>

If this still does not display correctly in Mobile Safari when accessed directly, then there may be an issue with the privacy settings on your 'full.html' file. Try making it private and then public again.

(2) Upload a completely new HTML file (with the sample code above) to the same directory as the 'full.html' file (your 'jbcore' folder) and see if you can access this directly in Mobile Safari. This should determine whether or not the problem is specifically with the 'full.html' file or with all HTML files in that directory.

(3) Try re-uploading your entire project to a new folder on Google Drive and ensure that all files and folders are made public.

The problem seems to be with access to the 'full.html' file on your Google Drive web space (both direct access and when Juicebox tries to access it dynamically) on iOS devices (but not in desktop browsers) so when I suggest that you try to access test pages directly (suggestions #1 and #2 above), you might want to use a service such as tiny.url to shorten the URLs and make life easier when entering the URLs into your Mobile Safari browser's address bar: http://tinyurl.com/

If we can figure out why the 'full.html' file cannot be accessed in Mobile Safari, then the other error 400 (which occurs when selecting a gallery from your menu) is likely to be related and hopefully the solution to one problem will fix the other.

Incidentally, I notice that your gallery's 'full.html' URL is much longer than mine. Maybe this has some relevance (especially when the 'juicebox.js' file is loaded and its code is run). Suggestions #1 and #2 above should tell us more.
If the problem does turn out to be due to the length of the URL, then there is little that can be done other than host your website somewhere other than Google Drive where you hvae more control over the path to your site.
If you have access to a regular web server, try hosting your web site there to see if everything works as expected. This should at least let us know whether or not the problem is somehow directly related to Google Drive (maybe with URL length or sharing settings).

Re: Splash page issue on Google Drive as web space

The error disappeared.

I created a test with an embedded gallery and essentially no scripting. I evolved that into the code which failed (served from Google Drive) before, but checked at each step that the code wasn't failing on iOS (or elsewhere, for that matter).

Since this is a boilerplate for several galleries, finally, I copied the boilerplate into the two directories (2014 and 2015) which failed before. Both are now happy in iOS and elsewhere.

I did tweak the code here and there; however, positively the only interaction between my embedding code and jbcore is the configuration options hash. Previously, the hash contained only entries which differed from your default. However, since I want this hash to be the default for all embedded galleries together, I now set ALL entries, either to the default value, or to to the values for which I want to set my own default. (No, I'm not going to take the defaults out again for more testing...)

Thanks for your help!

Re: Splash page issue on Google Drive as web space

The error disappeared.

That's great to hear! Thank you for letting me know.
I'm not sure what the root of the problem was (hence my troubleshooting suggestions) but I'm always happy to see a problem disappear.