• Registered: 2015-07-20
  • Posts: 11

Topic: Hide social icons on phone only?

I'm wondering if there is a way to not display the social icon bar on phone resolution only. One of my clients complains that it obscures too much of the image on smaller devices. Is this possible? Thank you.

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

Re: Hide social icons on phone only?

There is no way to set different icons for the Button Bar for Small and Large Screen Modes.

However, as long as you do not set showInfoButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section), then the entire overlay (including the Button Bar and all its icons) can be toggled on and off in Small Screen Mode by tapping the screen.

If you set showInfoButton="TRUE", then the Button Bar (including the Info Button) will always be present and tapping the Info Button will toggle the remainder of overlay elements on and off.

An alternative might be to use the Juicebox-Pro API getScreenMode() method to detect whether Small or Large Screen Mode is being used and then reload the gallery (if required) with the social media icons hidden in Small Screen Mode.
To see this in action, create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            #juicebox-container {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var counter = 0;
            var jb;
            function loadGallery(value) {
                jb = new juicebox({
                    containerId: "juicebox-container",
                    screenMode: "AUTO",
                    shareFacebook: value,
                    shareGPlus: value,
                    sharePinterest: value,
                    shareTumblr: value,
                    shareTwitter: value
                });
                counter++;
            }
            loadGallery(true);
            jb.onInitComplete = function() {
                var screenMode = jb.getScreenMode();
                if (counter === 1 && screenMode === 'SMALL') {
                    loadGallery(false);
                }
                if ((counter === 1 && screenMode === 'LARGE') || (counter === 2 && screenMode === 'SMALL')) {
                    $('#juicebox-container').show();
                }
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

It may take a little longer to load than usual as it's actually loading the gallery twice if Small Screen Mode is being used (once to determine the screen mode being used and the second time with the correct 'share' configuration options).
The gallery is hidden from view until after the final load (so the user does not see the gallery load twice).

Maybe not ideal but perhaps the best solution for something that Juicebox was not designed to do.

Also, if you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

  • Registered: 2015-07-20
  • Posts: 11

Re: Hide social icons on phone only?

Thanks, Steven. Great support as always.

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

Re: Hide social icons on phone only?

You're welcome!