To implement my suggestion, you'll need to modify the JavaScript embedding code in your gallery's HTML web page. (You can't add HTML or JavaScript code to the gallery's XML file which is why you need to insert the conditional configuration option into the embedding code instead.)
For example, for your 'Song Birds Of Costa Rica Gallery', you'll need to edit the web page into which the gallery is embedded, i.e.:
https://shelbourne-america.net/Birds_CostaRica/index.html
Then, you'll need to change the following embedding code (starting at line 24) from:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(204,204,204,1)'
});
</script>... to:
<script src="jbcore/juicebox.js"></script>
<script>
function isIPad() {
var userAgent = window.navigator.userAgent;
return (userAgent.match(/iPad/i));
}
var customPosition = isIPad() ? 'CENTER' : 'LEFT';
new juicebox({
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(204,204,204,1)",
backButtonHAlign: customPosition
});
</script>You can leave the entire 'juicebox-container' <div> (below the code above in your gallery's web page) completely unchanged.
Just change the code noted above and all should be well.