Topic: Button Url Halign Center

Hi Steven
I just found a bug,
I just placed two Button Bar Halign Center and Back Button Url Halign Center.
But I see that the Button Bar Halign Center?
Thanks for your help

Re: Button Url Halign Center

I'm not exactly sure what you mean.

If you set buttonBarHAlign="CENTER" and backButtonHAlign="CENTER" then the Button Bar and the Back Button will both be centered horizontally and will overlap each other.
You can avoid this by setting buttonBarPosition="TOP" or backButtonPosition="TOP" to place one of the elements in a reserved TOP area so that it does not overlap the other element positioned on the image overlay.
Otherwise, just be sure that both elements do not use the same value (LEFT, CENTER, RIGHT) so that they do not overlap each other.

If this does not help to explain what you are seeing, then please post back with a link to a gallery which demonstrates the problem (or post your gallery's configuration options so that I can reproduce your gallery).
Please also let me know what you are seeing (a screenshot would be helpful) and what you expect to see.
Once I'm able to see the problem for myself, I should hopefully be able to help further.
Thank you.

3 (edited by Tony83 2020-02-01 17:41:32)

Re: Button Url Halign Center

Hi Steven
Looked at the picture I would like to have both button centered as the picture.
Excuse me I do not speak English so Google translation Hi !!!!!
Thanks for your help

http://f8coy.fr/forum/Button.jpg

Re: Button Url Halign Center

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:

new juicebox({

... to

var jb = new juicebox({

... 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.

5 (edited by Tony83 2020-02-01 17:43:16)

Re: Button Url Halign Center

Hi Steven
I just made a mistake and I do not know what?
I made the change but I did not succeed, I gave up for the moment.
And I opened a gallery to add photos and the gallery does not open?
Look at the picture if attached.
And all the galleries I did I can not open them to add photos
Thanks for your help
Link:http://f8coy.fr/forum/Gallery.jpg

Re: Button Url Halign Center

Hi Steven
Here is my model, all my gallery is identical with different photos.
And now I can not add photos to any gallery.
Link: [Gallery downloaded. Link deleted. Thank you. Steven @ Juicebox]

Re: Button Url Halign Center

Opening a gallery in JuiceboxBuilder-Pro is an unrelated issue to your original query.
I can open your 'Annee-modele' gallery in JuiceboxBuilder-Pro without any problem. (Thank you for providing a sample gallery.)

My suggestion above requires modifying a couple of gallery files ('index.html' and 'theme.css') but this will not affect JuiceboxBuilder-Pro's ability to open the gallery (although if you open such a modified gallery and re-save it, your modifications will be lost).

Hopefully the instructions below will help.

Instructions to open an existing gallery in JuiceboxBuilder (to edit it):

(1) Click the 'Open Gallery...' button on the 'Start' tab (or select 'Gallery -> Open...' from the drop-down menu at the top of the application).

(2) In the pop-up 'Select Gallery Folder...' dialog window:
Mac - Navigate towards and then double-click the gallery folder.
Windows - Navigate towards and then select (with a single left-click) the gallery folder (not a file within the gallery folder) and click the 'Select Folder' button.

The gallery folder is the folder which contains the gallery's XML file and the gallery's XML file must be named 'config.xml'.
If you have renamed or moved this file (for example if you use a configUrl or baseUrl), then the gallery will not be able to be opened by JuiceboxBuilder.

Also, if you have modified the gallery's 'config.xml' file manually, then please check the file for XML syntax errors.
If the file has any errors, then the gallery will not be able to be opened by JuiceboxBuilder.
Open the file directly in a browser and, if there are any errors, the browser will let you know what the first error is and at what point in the file the error occurs.

As your 'Annee-modele' gallery opens in my own JuiceboxBuilder-Pro, your problem is not with renaming or moving the 'config.xml' file or with any errors within the file so the most likely cause is not actually selecting the gallery folder (but perhaps trying to select a file within the gallery folder) when attempting to open the gallery.

I hope this helps.

Re: Button Url Halign Center

Hi Steven
I am on Windows 10 Enterprise 1903 last update yesterday morning.
After this problem I uninstall and install JuiceBox twice and still have the same problem.
So I think there is a Windows file that is change when changing the CSS file that prevents opening the gallery.
Like the same morning after the Windows update I made a disk image backup and this afternoon I installed the disk image and everything works fine I can open all my Gallery Hi !!!!
For the modification of Button Url I dropped or you have my gallery you can change it and send it to me If possible if no it does not matter.
I thank you for everything.
Have a good day.

Re: Button Url Halign Center

So I think there is a Windows file that is change when changing the CSS file that prevents opening the gallery.

Modifying the gallery's 'theme.css' file (or updating Windows) should not prevent JuiceboxBuilder-Pro from opening the gallery.
In fact, I have modified your gallery (the one I downloaded earlier) and can open the modified gallery without any problem in JuiceboxBuilder-Pro. (I run the latest release version of Windows 10 Pro 1903 Build 18362.418.)

... everything works fine I can open all my Gallery Hi !!!!

I really do not know what might have caused your problem .
If you had a gallery file open in another program (for example, if you had the 'config.xml' file open in a text editor) whilst the gallery was still open in JuiceboxBuilder-Pro, then there is a chance that JuiceboxBuilder-Pro would not be able to empty its temporary working folder when closing the application but this usually results in the 'Open Gallery...' button being inoperable (rather than triggering an 'Invalid Gallery Folder' error message).
In any case, I am glad to hear that you have been able to resolve your problem. Thank you for letting me know.

For the modification of Button Url I dropped or you have my gallery you can change it and send it to me If possible if no it does not matter.

I have modified your gallery and have emailed you a link to the zip file.
The modified gallery is inside a folder named 'Annee-modele_MODIFIED'.

I have modified three files:
(1) index.html - I added the necessary code to override the Download Button's functionality.
(2) config.xml - I added some configuration options (and changed some others).
(3) theme.css - I modified line 825 to change the icon for the Download Button.

Open the 'index.html' file in a browser and you'll see the result.

Please note that although the gallery will open in JuiceboxBuilder-Pro, the Download Button will still have the regular Download Button icon when viewed in JuiceboxBuilder-Pro's live preview window. (JuiceboxBuilder-Pro reads only the gallery's 'config.xml' file when opening a gallery and knows nothing about the modifications made to the 'index.html' and 'theme.css' files.)
Also, if you do open the gallery in JuiceboxBuilder-Pro and re-save the gallery on the 'Publish' tab, then please note that the modifications will be lost (as JuiceboxBuilder-Pro will overwrite the modified 'index.html' and 'theme.css' files).

I have included the original gallery in my zip file (in a folder named 'Annee-modele_ORIGINAL') so that you can compare the 'index.html', 'config.xml' and 'theme.css' files to see the changes that I have made.

I hope this helps.

Re: Button Url Halign Center

Hi Steven
I received the modification I will be able to modify all my Gallery.
Thank you very much for all the help you gave me.
Have a good day.

Re: Button Url Halign Center

I received the modification I will be able to modify all my Gallery.

That's great! Thank you for letting me know.

Thank you very much for all the help you gave me.

You're welcome!

Have a good day.

You, too!