Topic: Lack of fullscreen expand - deliberate?

When I embed the gallery into the site, the fullscreen expand option doesn't show up even though I checked it. Is this intentional of the Lite version?

Re: Lack of fullscreen expand - deliberate?

The useFullscreenExpand configuration option is supported by both Juicebox-Lite (the free version) and Juicebox-Pro.
Here is a sample Lite gallery which sets useFullscreenExpand="TRUE" (and the gallery expands fullscreen rather than just full browser) when clicking the Expand Button on the Button Bar.
www.juicebox.net/demos/lite/full/?usefullscreenExpand=TRUE

The Fullscreen API is supported by all major modern browsers.
Please see here for a list of browsers which support this feature: http://caniuse.com/#feat=fullscreen

Please check that your gallery's 'config.xml' file contains useFullscreenExpand="TRUE" as an attribute to the opening <juiceboxgallery> tag. You can open the 'config.xml' file in a plain text editor to check its contents.
As long as you select the 'Use Fullscreen Expand' checkbox in JuiceboxBuilder-Lite, the option should be included in the XML file.

If you have recently made changes to an existing gallery, then also make sure that the original XML file is being overwritten on your web server. If you are in any doubt as to whether or not the original file is being overwritten, try deleting it from your web server first before uploading the new version in its place.

Finally, make sure that you clear your browser's cache before reloading your gallery's web page to ensure that your browser is using the current files from your web server (and not older cached versions).

If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further. Thank you.

3 (edited by madisonperry 2016-03-15 09:58:20)

Re: Lack of fullscreen expand - deliberate?

Sorry, but the option doesn't show up on the website, only on my computer. Pretty annoying. The config.xml file says TRUE. The link is: http://mikuruasahina1985.wix.com/stardu … ngel/r1l6n I would like some help with possibly fixing this. It's holding me off from buying the Pro version.

Re: Lack of fullscreen expand - deliberate?

Thank you for the link to your web page. (I forgot you were using Wix.)

The problem is due to the gallery not being embedded directly into your web page but, instead, being loaded into an iframe.
This is a limitation of using an iframe and is noted in the '2) Using an iframe' support section here.

You can also use an iframe to embed a gallery in a different folder. Please note that this method will limit the functionality of the gallery. For example, when embedding a gallery in an iframe, the 'Expand Gallery' and 'Fotomoto Shopping Cart' buttons are disabled and the 'Back Button' will not work.

The Expand Button is displayed and functional when viewing the web page that your gallery is embedded into:
https://googledrive.com/host/0BwtcFyjGj … index.html

Ordinarily, all gallery files need to be on the same domain as the web page containing the gallery's JavaScript embedding code, otherwise the same-origin policy will prevent the gallery from being displayed.
Please see here for for information on the same-origin policy: https://developer.mozilla.org/en-US/doc … gin_policy

However, it looks like your Google Drive web space (where your gallery is hosted) is already set up to use CORS (cross-origin resource sharing) so you should hopefully be able to replace your iframe code with the following baseUrl embedding code (to embed the gallery directly into your web page and have the Expand Button displayed).

<!--START JUICEBOX EMBED-->
<script src="https://googledrive.com/host/0BwtcFyjGjQxGSWZfb3Jrbm9qWXc/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: 'https://googledrive.com/host/0BwtcFyjGjQxGSWZfb3Jrbm9qWXc/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600',
        backgroundColor: '222222'
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.

Re: Lack of fullscreen expand - deliberate?

Sorry, that didn't work. So I'm just out of luck then? There's no work-around to this on Wix.com sites?

Re: Lack of fullscreen expand - deliberate?

There is certainly no way to have the Expand Button displayed in a gallery which is loaded into an iframe.

When hosting a gallery on a different domain and embedding the gallery directly using the recommended embedding code, then the only solution would be to use CORS.
More information about CORS can be found here: http://www.w3.org/TR/cors/
Google Drive already supports CORS (at least on my own test gallery) so no further action is required other than using the correct embedding code in your web page.

My suggestion above should work OK.

I have been able to embed a gallery hosted on Google Drive directly into a web page on a different domain (not on googledrive.com).
Here is an example of a Juicebox-Lite gallery hosted on Google Drive but embedded directly into a web page on the testgallery.comyr.com domain using the embedding code below. The Expand Button is displayed and functional.

Test URL: [Link removed.]

Test Embedding Code:

<!--START JUICEBOX EMBED-->
<script src="https://googledrive.com/host/0BxXHNif2h4NRcmxHOW9lUDBWWTQ/jbcore/juicebox.js"></script>
<script>
new juicebox({
    baseUrl: 'https://googledrive.com/host/0BxXHNif2h4NRcmxHOW9lUDBWWTQ/',
    containerId: 'juicebox-container',
    galleryWidth: '800',
    galleryHeight: '600'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Perhaps you could create a test page on your site (you would need to publish it but you would not need to link to it from any other of your web pages) using the embedding code I posted in my last post and I could take a look and try to figure out why it is not working for you.

7 (edited by madisonperry 2016-03-17 07:33:45)

Re: Lack of fullscreen expand - deliberate?

never mind.

Re: Lack of fullscreen expand - deliberate?

OK... but if you ever want to try again, all you should need to do is use the baseUrl method of embedding and use absolute URLs in the embedding code to point towards your 'juicebox.js' file and your gallery folder on the googledrive.com domain.

Re: Lack of fullscreen expand - deliberate?

what are the absolute URLs I have to use? Can you tell me? I'm not good at very technical stuff. Thanks.

Re: Lack of fullscreen expand - deliberate?

The complete embedding code you should use (including the absolute URLs) is noted a few posts back:

<!--START JUICEBOX EMBED-->
<script src="https://googledrive.com/host/0BwtcFyjGjQxGSWZfb3Jrbm9qWXc/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: 'https://googledrive.com/host/0BwtcFyjGjQxGSWZfb3Jrbm9qWXc/',
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '600',
        backgroundColor: '222222'
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I know you said that it didn't work but please try it again. I've tested it myself and it seems to work fine.