Unfortunately, it is not possible to 'attach' the Back Button to the Button Bar and then have the 'new' Button Bar horizontally centered. If you center both the Back Button and the Button Bar, then they will overlap each other (as you have discovered).
You could try to reposition the Back Button relative to the Button Bar using CSS but this might be quite difficult and you might also run into problems. (Juicebox would not know of your modification and would expect the Back Button to be elsewhere which might cause problems when redrawing the gallery, for example when the gallery is expanded.)
One other possible solution would be to repurpose a Button Bar button which you do not currently use and turn it into a Back Button.
Such a modification (overriding Juicebox's own handling of a Button Bar button) is not officially supported but it should not cause any problems (that I am aware of) and it should also not be too difficult to set up.
For this example, let's use the Download Button (which, from your screenshot, you are not currently using and which appears to the left of the buttons that you are currently using).
(1) Make sure that the Download Button is displayed on your Button Bar by setting the following configuration option.
showDownloadButton="TRUE"
(2) Change the icon for the Download Button to be the Back Button 'home' icon. Open your gallery's 'jbcore/classic/theme.css' file in a plain text editor and change lines 823 - 826 from:
.jb-bb-button.jb-bb-btn-download:before
{
content: "\e017";
}
... to:
.jb-bb-button.jb-bb-btn-download:before
{
content: "\e014";
}
Please note that the line numbers above refer to the current version of Juicebox-Pro (v1.5.1).
(3) Change the rollover tooltip text for the button from 'Download' (the default text for the Download Button) to 'Go Back' (the default text for the Back Button) by setting the following languageList configuration option:
languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of|Send Email|Go Back|Password|Incorrect Password.|Regarding image|in gallery"
You'll need to set this configuration option manually as it does not appear in the JuiceboxBuilder-Pro interface.
Please see the International Gallery Text support section for more information on the languageList configuration option.
Please also see the Setting Config Options support section for details on how to set a configuration option manually.
(4) Override Juicebox's own handling of the button. First, in your gallery's embedding code, change:
... to
... so that you can use the Juicebox-Pro API (to check when the gallery is ready and then change the functionality of the Download Button) and refer to the gallery via the variable 'jb'. Next, add the following JavaScript code before the closing </script> tag in your gallery's embedding code, changing the URL in the window.open() function to your own Back Button URL.
jb.onInitComplete = function() {
$('.jb-bb-btn-download').empty();
$('.jb-bb-btn-download').off('click');
$('.jb-bb-btn-download').click(function() {
window.open('http://example.com/index.html', '_self');
});
};
Your gallery's embedding code might now look something like this:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222",
buttonBarHAlign: "CENTER",
languageList: "Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Images|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of|Send Email|Go Back|Password|Incorrect Password.|Regarding image|in gallery",
showDownloadButton: "TRUE"
});
jb.onInitComplete = function() {
$('.jb-bb-btn-download').empty();
$('.jb-bb-btn-download').off('click');
$('.jb-bb-btn-download').click(function() {
window.open('http://example.com/index.html', '_self');
});
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED--></body>
I hope this helps.
You might also like to put forward your suggestion (to add the Back Button to the Button Bar or at least not have the Back Button and Button Bar overlap when they are positioned similarly) by posting it in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented in future versions but this is certainly the best place for all ideas.
Thank you.
