Re: Home Button gets hidden and replaced by an X on Apple's iPads
I'm so sorry... I've just noticed there was a small but crucial error in the code I provided which might be causing some confusion.
I've corrected it in my post above (in case anyone copies it in the future).
The correct line of code should be:
var customPosition = isIPad() ? 'CENTER' : 'LEFT';(Note the two brackets after 'isIPad'.)
I guess I was playing around with functions and variables before I decided on what to post and I ended up with a mismatch.
Anyway, if you change the line above, you'll find that the Back Button is centred only on iPads. On other devices (including desktops), the Back Button will be positioned to the left.
A couple of other notes which might help to clarify some things...
... and Apple's Horrible X has been obliterated!
The cross should not appear if you set fullScreenExpand="FALSE". If fullscreenExpand="TRUE", then the cross should appear, no matter what other configuration options are used.
However, the trade-off on a large-screen computer is that the images in a Gallery will no longer fill the Browser window (as you will see that they do in the original link to "Lemurs, Bronx Zoo" on the Landing-page.
I see no difference in the size of the images between your Bronx_Zoo and Bronx_Zoo-TESTING galleries (tested in a desktop browser).
Other than the position of the Back Button (which should be the same in both galleries after you change the code above), they seem identical to me.
It is probably not possible to further refine the Script to say, in effect:
"Ignore the Script unless the User is using Mobile Safari on a newer iPad" ?!!
It's possible to specifically target more recent versions of iOS but there seems to be no easy way to determine the version of iOS other than parsing the user agent string and there are many ways to do this.
There are several different examples on these pages:
https://stackoverflow.com/questions/757 … e/13549283
https://stackoverflow.com/questions/834 … javascript
I'm not sure in which version of iOS the fullscreen exit button was introduced but here's some code which should center the Back Button only on iPads running iOS 12 or greater you can change this version number in the code if you need to), with the Back Button positioned left in all other cases.
<script src="jbcore/juicebox.js"></script>
<script>
function isIPad() {
var agent = window.navigator.userAgent;
return /iPad/i.test(agent);
}
function iOSVersion() {
var agent = window.navigator.userAgent;
var start = agent.indexOf('OS ');
if (/iP(ad|hone|od)/i.test(agent) && start > -1) {
var match = agent.match(/OS (\d+)_(\d+)_?(\d+)?/);
var version = [parseInt(match[1], 10), parseInt(match[2], 10)];
return parseFloat(version.join('.'));
}
return false;
}
var customPosition = isIPad() && iOSVersion() >= 12 ? 'CENTER' : 'LEFT';
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(204,204,204,1)",
backButtonHAlign: customPosition
});
</script>You could do likewise with the useFullscreenExpand configuration option (using the Fullscreen API on all devices except the iPad) if you like.
<script src="jbcore/juicebox.js"></script>
<script>
function isIPad() {
var agent = window.navigator.userAgent;
return /iPad/i.test(agent);
}
function iOSVersion() {
var agent = window.navigator.userAgent;
var start = agent.indexOf('OS ');
if (/iP(ad|hone|od)/i.test(agent) && start > -1) {
var match = agent.match(/OS (\d+)_(\d+)_?(\d+)?/);
var version = [parseInt(match[1], 10), parseInt(match[2], 10)];
return parseFloat(version.join('.'));
}
return false;
}
var fullscreen= isIPad() && iOSVersion() >= 12 ? 'FALSE' : 'TRUE';
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(204,204,204,1)",
useFullscreenExpand: fullscreen
});
</script>I hope this helps.