You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → ButtonBar icon size in small screen mode. [SOLVED]
Am I correct in saying that ButtonBar buttons (and the back button) do not scale? If I am viewing a full screen galley on a mobile phone and have set-up a lot of buttons, the buttons wrap because, I assume, they haven't scaled down. Is it possible to resize the buttons for Small screen Mode?
The size of the Button Bar icons is set via the buttonBarIconSize configuration option (default value '20'). The Button Bar icons will always be displayed at the size specified via this option (and will wrap if necessary) and will not auto-scale depending on the number of icons being used. This is true in both Small and Large Screen Modes.
For reference, the Button Bar configuration options can be found here.
My apologies. I think I may have wasted your time. I've just noticed that the API has the getScreenMode method. I'll try altering the config options if this is set to 'SMALL'. I'll get back to you if I can't get this to work. Thanks for the speedy reply.
The configuration options need to be set before the gallery is loaded which happens before you are able to use getScreenMode() but you could perhaps reload the gallery with different configuration options if Small Screen Mode is being used.
Yes, if one is using a lot of buttons, they will wrap on mobile devices. It's not that I want them to scale depending on the number of buttons, I just want to change the size of the buttons in small screen mode because they are too large.
(I expected them to be smaller in small screen mode is all. I appreciate that I didn't explain myself very well.)
I've used the following code to try and solve this.
var jb = new juicebox({
containerId: '@Model.Container'
});
jb.onInitComplete = function (e) {
var mode = jb.getScreenMode();
if (mode == 'SMALL') {
$(".jb-bb-button").css("font-size", "16px");
}
};The problem with this is, the buttons initially display at the preset size of 20px before resizing. Is there a better way of applying the resize so this doesn't happen?
You could maybe hide the .jb-bb-button class as soon as the page loads and make it visible only after you have changed the font size. Try something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
.jb-bb-button {
visibility: hidden;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
jb.onInitComplete = function (e) {
var mode = jb.getScreenMode();
if (mode == 'SMALL') {
$('.jb-bb-button').css('font-size', '16px');
}
$('.jb-bb-button').css('visibility', 'visible');
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>Thank you for the suggestion. I tried this and it worked perfectly, but the client really didn't like it as the button bar appears about the same time was the image and he didn't like the delay. I will have to use an alternative approach.
So… I thought I would let the client see what small screen mode is like. If he likes it then problem solved, but I can't get it to work, see http://www.brianwebster.uk/index/animus. The gallery fits the following criteria:
a. The gallery has dimensions of 100% x 100%.
b. There is no existing viewport tag on the web page.
c. The gallery is the only content on the page.
I have also set showSmallBackButton, showSmallThumbsOnLoad, showSmallThumbsButton, showSmallThumbNav and showSmallPagingText.
What am I doing wrong?
Thank you.
I tried this and it worked perfectly, but the client really didn't like it as the button bar appears about the same time was the image and he didn't like the delay.
If you are referring to the delay between the Button Bar background and the Button Bar icons being displayed, then you could ensure that they are displayed together by hiding and showing the .jb-bb-bar class as well as the .jb-bb-button class.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
.jb-bb-bar, .jb-bb-button {
visibility: hidden;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
jb.onInitComplete = function (e) {
var mode = jb.getScreenMode();
if (mode == 'SMALL') {
$('.jb-bb-button').css('font-size', '16px');
}
$('.jb-bb-bar, .jb-bb-button').css('visibility', 'visible');
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>I thought I would let the client see what small screen mode is like.
If you want to have your gallery displayed in Small Screen Mode in all browsers and on all mobile devices (rather than just when Juicebox-Pro detects a small-screen device), then set screenMode="SMALL" in JuiceboxBuilder-Pro's 'Customize -> General' section.
Thank you. If small screen mode is set, I know reset the icon size (20px) and containers to the appropriate values. This seems to have done the trick.
I'm glad you've been able to resolve your problem.
Thank you for posting back to let me know.
Juicebox Support Forum → Juicebox-Pro Support → ButtonBar icon size in small screen mode. [SOLVED]
Powered by PunBB, supported by Informer Technologies, Inc.