Topic: Replace SVG icon characters with images?

Can I substitute my own images (32 x 32px pngs) in place of the SVG navigational characters used by JuiceBoX?

I'm using custom left and right arrows in pages which do not use JuiceBox, and I'd like to be consistent and use them throughout. I've tried styling and colouring the SVG icons in config.xml, and using different characters by changing theme.css, but haven't succeeded in getting the bevelled and shadowed look I'd like e.g.:http://www.brianwatsonphoto.co.uk/Pano/ … s/left.png.

I can imaging this might be quite complicated: is there an easy way?

Regards,

Brian

Re: Replace SVG icon characters with images?

Got it! I found an easy option changing:


.jb-navigation .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content: "\e001";
}

in theme.css to

.jb-navigation .jbn-left-button:before, .jb-flag-large-screen-mode .jb-navigation .jbn-left-button:before
{
    content:url(../../PNGs/left.png);
}

This seems to work. Will I have caused myself problems elsewhere?

Regards,

Brian

Re: Replace SVG icon characters with images?

The only problem I can think of at the moment is that your PNG image will not be scaled when navButtonIconSize is used.

However, if navButtonIconSize is used, then the navigation button background (the semi-transparent grey circle) will be scaled and, if it is large enough, it will become visible behind your PNG image.
To counteract this, you can make the navigation button background completely transparent by setting navButtonBackColor="rgba(0,0,0,0)" (in JuiceboxBuilder-Pro's 'Customize -> Color' section).

Otherwise, as long as your PNG image looks OK in both Small Screen Mode and Large Screen Mode, I do not see any other obvious problems or pitfalls.

Re: Replace SVG icon characters with images?

Thanks Steven,

I hadn't used navButtonIconSize, and the navigation button background did just show from behind my PNG, but I had been able to hide it by making it transparent as you suggest. In Small Screen Mode (iPhone) my PNGs don't appear at all, which is ideal.

Thanks yet again for your help and advice!

Regards,

Brian

Re: Replace SVG icon characters with images?

You're welcome!

In Small Screen Mode (iPhone) my PNGs don't appear at all, which is ideal.

Just to clarify, the main image navigation buttons would appear in Small Screen Mode/Touch Input Mode only if you set showImageNav="ALWAYS" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).
When showImageNav="HOVER" (the default value), the main image navigation buttons would be hidden in Small Screen Mode/Touch Input Mode (in preference to the swipe gesture for navigating between images).

Re: Replace SVG icon characters with images?

Thanks Steven,

Small Screen Mode/Touch Input Mode

These are not the same thing though: iPhones use Small Screen mode, but iPads use Large Screen Mode and are touch screens. I've put in a Feature Request to allow navigation buttons to be hidden for touch screens regardless of screen resolution.

I suggested a new configuration option: "showThumbNav" defaulting to TRUE (always show thumb nav buttons as at present), with options of AUTO (hide thumb nav buttons on touch screens), and FALSE (never show). Would this be helpful, or is there an easier way?

Re: Replace SVG icon characters with images?

These are not the same thing though: iPhones use Small Screen mode, but iPads use Large Screen Mode and are touch screens.

That's correct. Instead of saying "in Small Screen Mode/Touch Input Mode" I should probably have said "in Small Screen Mode and Touch Input Mode (the combination used on an iPhone which you referred to)".

For other users reading this thread, more information about Screen and Input Modes can be found in the Gallery Tour.

I'm not sure if you are specifically referring to thumbnail or main image navigation buttons but the current configuration options which change the visibility of the navigation buttons are:
showImageNav (which affects the main image nav buttons in both Small and Large Screen Modes) HOVER/ALWAYS/NEVER
showSmallThumbNav (which shows or hides the thumbnail nav buttons in Small Screen Mode) - TRUE/FALSE

Unfortunately, there's no configuration option available which would allow you to change the visibility of the navigation buttons for a specific Input Mode.

If you wanted to try to hide navigation buttons when they would normally be visible (for example), then you could perhaps detect which Screen Mode is currently being used (via the Juicebox-Pro API getScreenMode() method) and then implement some custom CSS and JavaScript to override Juicebox-Pro's own handling of the nav button visibility.
This might be fraught with difficulty (there are often unforeseen knock-on problems with such modifications) and I would not recommend it but you are free to try it if you like.
Please note that there is no Juicebox-Pro API method to determine which Input Mode is currently being used. You'd need to write your own routine to detect whether a touch screen is in use (if you wanted to).

Thank you for posting your suggestion in the Feature Requests forum thread.
It will certainly be seen by the developers there.

Re: Replace SVG icon characters with images?

Thanks for the reply.

I'm using my own navigation buttons in large screen mode, and hiding them in small screen mode: I think they are superfluous on touch screens where you can swipe. iPads defaulting to large screen mode means I can't hide thumb nav buttons on iPads without also hiding them on bigger screens.

I've been smacked with unforeseen knock-on problems before, when I have got ahead of myself, so I may wait and see if the devs think my suggestion is worthwhile.

Thanks again,

Brian

Re: Replace SVG icon characters with images?

Steven,

For information, and to help others, thumb nav buttons can be made to disappear from Large Screen Mode touch screens e.g. iPads, without (so far) unintended consequences:

    <script>
        var jb = new juicebox({
        containerId: 'juicebox-container'
        });
        
        var is_touch_device = 'ontouchstart' in document.documentElement;
        var touch_status = (is_touch_device) ? 'touch' : 'no-touch';
        var screenmode = jb.getScreenMode();

        jb.onInitComplete = function(e){    
            if (screenmode == 'LARGE' && touch_status == "touch"){
                    $('.jbn-right-button, .jbn-left-button').css('display','none');
                };
            }
        
        jb.onThumbPageChange = function(e){    
            if (screenmode == 'LARGE' && touch_status == "touch"){
                    $('.jbn-right-button, .jbn-left-button').css('display','none');
                };
            }
        
      </script>

When a Gallery opens, the right thumb nav button briefly shows (unintended but appropriate hint to users to swipe) then disappears.

This may make my feature request superfluous: detecting touch screens is said to be unreliable however it is done, but it works for me...

Regards,

Brian

Re: Replace SVG icon characters with images?

Thank you for sharing your code.
Hopefully it will help others who want to achieve the same thing (to hide navigation buttons in the combination of Large Screen Mode and Touch Input Mode).