Topic: Some problems with buttons on a phone

Hello !

I am having some problems with buttons when displaying my juicebox gallery on a phone (tested on an iphone 4s with ios 6.1.3). The gallery is online at http://yannicklerestif.com/www_new/juic … index.html

Here are the problems :

- "Home" button does not display on the phone.
- Buttons and caption do not disappear when I tap on the phone

I would like users to be able to pinch to zoom on the gallery and followed your advice on that page : http://juicebox.net/forum/viewtopic.php?id=121, using 99% size for the gallery. I seems to work, but on top of the two problems above, some more appear :

- Gallery's dimensions fit the browser space if I scroll to hide the adress bar, but when the gallery is first displayed the address bar is visible, hence the page is not centered. As a consequence, caption is not visible.
- Buttons are a lot smaller (2-3 times smaller) than when my gallery was at 100%
- Pinch to zoom does not seem to work if the phone is in landscape mode

Hopefully there are solutions to these...? The two first being the most important.

Please tell me if I am being unclear. Maybe you do need a screenshot ?

Thanks in advance,

Yannick

Re: Some problems with buttons on a phone

- "Home" button does not display on the phone.

Your gallery sets showSmallBackButton="false". Change this to showSmallBackButton="TRUE" for the Back Button to be displayed in Small Screen Mode.

- Buttons and caption do not disappear when I tap on the phone

Your gallery sets showInfoButton="true" and this disables the default behavior controlling the overlay visibility. (This is noted in the description of the showInfoButton configuration option in the Button Bar Options section of the Config Options page.)
When the Info Button is displayed on the Button Bar, the overlay can be toggled on and off by tapping the Info Button (rather than anywhere on the screen).

- Gallery's dimensions fit the browser space if I scroll to hide the adress bar, but when the gallery is first displayed the address bar is visible, hence the page is not centered. As a consequence, caption is not visible.
- Buttons are a lot smaller (2-3 times smaller) than when my gallery was at 100%

These are both direct consequences of your gallery not having 100% x 100% dimensions which exactly fill the viewport.
By default, a Juicebox gallery which is embedded in a page in Small Screen Mode at dimensions of less than 100% x 100% would ordinarily display the Splash Page (which would prevent anyone seeing the smaller icons) but your gallery disables this by setting showSplashPage="NEVER".
To solve the issue with the small buttons, try scaling your web page for mobile devices by adding the following line to the <head> section of your page:

<meta name="viewport" content="width=device-width, initial-scale=1;">

To auto-hide the address bar, try adding the following code to the <head> section of your page:

<script>
    window.addEventListener("load", function() {
        setTimeout(function() {
            window.scrollTo(0, 1);
        }, 0);
    });
</script>

The other solution would be to simply have your gallery's dimensions 100% x 100% (but this locks the viewport which disables pinch-zooming).

- Pinch to zoom does not seem to work if the phone is in landscape mode

It is possible to pinch-zoom in landscape mode but it can be quite difficult to do so as Juicebox has its own gestures for gallery navigation and on first touching the screen, Juicebox will usually initiate a swipe gesture to change image before the pinch gesture can be recorded. It can be done, though, if you are very careful with your initial two-pronged touch action. (Tested on an iPod Touch 4 iOS 6.1.3.)

Re: Some problems with buttons on a phone

Ok !
Thank you for this fast and thorough answer !