1 Topic by arachnid (edited by arachnid 2013-09-02 17:34:38)

  • Registered: 2012-05-01
  • Posts: 97

Topic: difference between showExpandButton and UseFullScreenExpand

What is the difference between showExpandButton and useFullScreenExpand?

Is it possible to configure the look-and-feel of the useFullScreenExpand page?

I can't get useFullScreenExpand working on an Ipad (Chrome) or Android phone (Chrome and Firefox)
It works fine on a desktop/laptop

  • Registered: 2012-04-24
  • Posts: 5,924

Re: difference between showExpandButton and UseFullScreenExpand

If showExpandButton is set to 'TRUE, the Expand Button will be displayed on the Button Bar.
When a gallery is expanded (via the Expand Button), the gallery will (by default) fill the user's browser window.
However, if useFullscreenExpand is set to true, the gallery will fill the user's entire screen (not just the browser window) but only in browsers which support the Fullscreen API.
Please see these pages for more information on the Fullscreen API:
http://www.w3.org/TR/fullscreen/
https://developer.mozilla.org/en-US/doc … creen_mode

For a list of browsers which currently support the Fullscreen API, please see here.

Is it possible to configure the look-and-feel of the useFullScreenExpand page?

An expanded gallery (whether useFullscreenExpand is used or not) uses the same configuration options as the gallery in normal (unexpanded) mode.

  • Registered: 2012-05-01
  • Posts: 97

Re: difference between showExpandButton and UseFullScreenExpand

Thanks!

Why is in useFullScreenExpand mode the background in Firefox black and in Chrome White?

Steven wrote:

If showExpandButton is set to 'TRUE, the Expand Button will be displayed on the Button Bar.
When a gallery is expanded (via the Expand Button), the gallery will (by default) fill the user's browser window.
However, if useFullscreenExpand is set to true, the gallery will fill the user's entire screen (not just the browser window) but only in browsers which support the Fullscreen API.
Please see these pages for more information on the Fullscreen API:
http://www.w3.org/TR/fullscreen/
https://developer.mozilla.org/en-US/doc … creen_mode

For a list of browsers which currently support the Fullscreen API, please see here.

Is it possible to configure the look-and-feel of the useFullScreenExpand page?

An expanded gallery (whether useFullscreenExpand is used or not) uses the same configuration options as the gallery in normal (unexpanded) mode.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: difference between showExpandButton and UseFullScreenExpand

This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.

Firefox applies this by default along with background-color: black

To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:

#jb-glry-dlg:fullscreen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-moz-full-screen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-webkit-full-screen {
    background-color: #ffffff;
}

Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.

I have notified the developers of this inconsistency.

  • Registered: 2012-05-01
  • Posts: 97

Re: difference between showExpandButton and UseFullScreenExpand

Hi Steven,

Thanks, I shall follow your advice.

regards
Hans

Steven wrote:

This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.

Firefox applies this by default along with background-color: black

To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:

#jb-glry-dlg:fullscreen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-moz-full-screen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-webkit-full-screen {
    background-color: #ffffff;
}

Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.

I have notified the developers of this inconsistency.

  • Registered: 2012-05-01
  • Posts: 97

Re: difference between showExpandButton and UseFullScreenExpand

Hi Steven,

Is my custom theme a good location or must it be a separate CSS file after the juicebox scripts?

kind regards

Hans

Steven wrote:

This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.

Firefox applies this by default along with background-color: black

To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:

#jb-glry-dlg:fullscreen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-moz-full-screen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-webkit-full-screen {
    background-color: #ffffff;
}

Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.

I have notified the developers of this inconsistency.

  • Registered: 2012-05-01
  • Posts: 97

Re: difference between showExpandButton and UseFullScreenExpand

Custom theme is fine.
I prefer a black background color. It is working fine in Chrome and Firefox. Fullscreen is working in Opera Next but background-color : #000000; has no effect. Safari is making a mess of the gallery presentation.

arachnid wrote:

Hi Steven,

Is my custom theme a good location or must it be a separate CSS file after the juicebox scripts?

kind regards

Hans

Steven wrote:

This is due to your gallery's backgroundColor being 'transparent' and each browser having a different deafult background color when the Fullscreen API is used. Firefox uses a black background whereas Chrome uses a white background. See the 'Styling it all' section on this web page.

Firefox applies this by default along with background-color: black

To set the default background color to white for Fullscreen API mode in all browsers, use the following CSS in the web page containing your gallery:

#jb-glry-dlg:fullscreen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-moz-full-screen {
    background-color: #ffffff;
}            
#jb-glry-dlg:-webkit-full-screen {
    background-color: #ffffff;
}

Please note that the code above does not set a new gallery background color for Fullscreen API mode. (The gallery's own background color will still be used.) It simply sets a default background color which will show through if the gallery's own background color uses transparency.

I have notified the developers of this inconsistency.

  • Registered: 2012-04-24
  • Posts: 5,924

Re: difference between showExpandButton and UseFullScreenExpand

Is my custom theme a good location or must it be a separate CSS file after the juicebox scripts?

Your custom theme file can be in any location you wish (whatever works best for you). It is loaded via the themeUrl configuration option and should not be included manually (in a <link> tag) in your web page.
The code I posted can be included in either your custom theme CSS file or in the HTML page containing the gallery. It should not make any difference.

I prefer a black background color. It is working fine in Chrome and Firefox. Fullscreen is working in Opera Next but background-color : #000000; has no effect. Safari is making a mess of the gallery presentation.

I have created a test gallery using the following as a gallery's 'index.html' file and I do not see the problems you are describing:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Juicebox-Pro Gallery</title>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #jb-glry-dlg:fullscreen {
                background-color: #000000;
            }            
            #jb-glry-dlg:-moz-full-screen {
                background-color: #000000;
            }            
            #jb-glry-dlg:-webkit-full-screen {
                background-color: #000000;
            }            
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            new juicebox({
                containerId: 'juicebox-container',
                galleryWidth:' 400',
                galleryHeight: '400',
                backgroundColor: 'rgba(0,0,0,0)',
                useFullscreenexpand: 'true'
            });
        </script>
        <div id="juicebox-container"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>

I have uploaded the gallery here. [Gallery removed.]
The fullscreen functionality works fine in all browsers I have tested it in (Firefox 23.0.1, Chrome 29, Opera 16, Opera Next 16 and Safari 5.1.7) and the background is black in every case. Additionally, the layout of the gallery is fine in all browsers including Safari.