• Registered: 2013-03-20
  • Posts: 10

Topic: Fullscreen [SOLVED]

how can i change the background colour of the fullscreen mode?

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

Re: Fullscreen [SOLVED]

Juicebox uses only one backgroundColor configuration option for both normal and fullscreen modes.
You could try changing the background color of the gallery container using JavaScript when the Juicebox-Pro API method onExpand() is fired.

  • Registered: 2013-03-20
  • Posts: 10

Re: Fullscreen [SOLVED]

using backgroundcolor doesnt work. but i have no knowlege of Javascript, could you change it for me pls? in D9D9D9

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

Re: Fullscreen [SOLVED]

It might need a little tweaking depending on your own scenario but here is an example which has a gallery with a red background in normal mode and a #d9d9d9 background in fullscreen mode:

<!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;
            }
        </style>
    </head>
    <body>
        <!--START JUICEBOX EMBED-->
        <script src="jbcore/juicebox.js"></script>
        <script>
            jb=new juicebox({
                containerId : 'juicebox-container',
                galleryWidth: '400',
                galleryHeight: '400',
                backgroundColor: 'rgba(0,0,0,0)'
            });
            jb.onExpand = function(isExpanded) {
                if (isExpanded) {
                    document.body.style.backgroundColor="#d9d9d9";
                    document.getElementById("jb-glry-dlg").style.backgroundColor="#d9d9d9";
                    
                } else {
                    document.body.style.backgroundColor="#ffffff";
                    document.getElementById("jb-glry-dlg").style.backgroundColor="#ff0000";
                }
            };
        </script>
        <div id="juicebox-container" style="background-color: #ff0000;"></div>
        <!--END JUICEBOX EMBED-->
    </body>
</html>
  • Registered: 2013-03-20
  • Posts: 10

Re: Fullscreen [SOLVED]

where can i find such a way to edit? can i do them in showkase? or should i use some other program, or?

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

Re: Fullscreen [SOLVED]

My sample code is a complete gallery 'index.html' page.
It would be difficult to incorporate this within Showkase as Showkase builds web pages from many source files.
You could perhaps edit a gallery's 'index.html' page (once the gallery pages have been built) but the code above relies on the gallery's background being transparent, which may not be suitable for your scenario.

Juicebox was not designed to allow for different background colors in normal and fullscreen modes and this is the best solution that I can think of.

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

Re: Fullscreen [SOLVED]

Juicebox v1.4.0 has just been released and introduces a new expandedBackgroundColor configuration option so it is now possible to set different background colors for normal and expanded modes. Please see this blog entry for details.