• Registered: 2013-08-19
  • Posts: 8

Topic: Back Button Icon does not display

Two questions.

1. The back button icon does not display. Instead you see something and the link is there, but not the icon.

2. Can I display the back button only on the expanded gallery? I have the gallery embedded on a page and the back button does not make sense there, but it is needed on the expanded gallery.

http://www.sloweurope.com/test-pk/

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

Re: Back Button Icon does not display

1. The back button icon does not display. Instead you see something and the link is there, but not the icon.

Your gallery uses the Juicebox-Pro v1.4.2 'juicebox.js' file but the 'theme.css' file (set via your themeUrl) is from v1.3.3.
Both the JavaScript and CSS files should be from the same version. (I would recommend v1.4.2 over v1.3.3 due to the number of bugs fixed since v1.3.3. Please see the Version History for a full list of changes.) Once you upgrade your gallery's theme file, the Back Button should hopefully display OK.
If you have not made any customizations to the 'theme.css' file, then you can just remove the themeUrl from your embedding code and make sure that your gallery uses the complete stock 'jbcore' folder from the Juicebox-Pro v1.4.2 download zip package ('juicebox_pro_1.4.2/web/jbcore/').

2. Can I display the back button only on the expanded gallery? I have the gallery embedded on a page and the back button does not make sense there, but it is needed on the expanded gallery.

Juicebox-Pro uses only one set of configuration options for both normal and expanded modes.
Once expanded, a gallery can be closed by clicking the 'Expand' button on the Button Bar (which, in expanded mode, changes its icon and has 'Close Gallery' as rollover text).
If you want, you can change the icons used by following the Using Custom Icons instructions. You can also change the rollover text using the languageList configuration option.

Strictly speaking, it is possible to display the Back Button only in expanded move but it would require knowledge of JavaScript, CSS and use of the Juicebox-Pro API.
To see this in action, create a sample gallery using JuiceboxBuilder-Pro and use the following as the gallery's HTML index page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
        var jb = new juicebox({
            backButtonPosition: "TOP",
            backButtonUrl: "http://www.example.com/",
            backButtonUseIcon: "TRUE",
            containerId: "juicebox-container",
            galleryHeight: "400",
            galleryWidth: "600"
        });
        jb.onInitComplete = function() {
            setTimeout(function(){
                $('.jb-go-back').hide();
            }, 1000);
            jb.onExpand = function(expanded) {
                expanded ? $('.jb-go-back').show() : $('.jb-go-back').hide();
            };
        };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

This may not be ideal (as the Back Button is initially visible when the gallery is first loaded and before it disappears) but please remember that Juicebox was not designed with this in mind.

In any case, it sounds like using the Expand/Close button may be what you are looking for.

  • Registered: 2013-08-19
  • Posts: 8

Re: Back Button Icon does not display

When I did the last upgrade I was too lazy to go through classic/theme.css and make the few changes I needed to caption font size, so I used the old version that I had customized.

Now I have removed my customized version of theme.css and instead included the changes to the few styles in the header of the page showing the photo galleries. A better solution.

Thanks for pointing this out. I won't use the javascript to override the back button and will probably just keep with the Expand/Close button.