My suggestion above works OK in Mobile Chrome and Mobile Safari on my iPod Touch.
However, here are a few thoughts that might help (although please note that Juicebox was not designed with this functionality in mind).
(1) On iOS devices, the gallery will automatically expand in a new page. Please see the Expand Gallery Behavior support section for details.
Try setting expandInNewPage="FALSE" (at least for testing purposes) to see if this makes a difference.
(2) My code above forces the gallery to always be displayed in Large Screen Mode. If you want to retain Small Screen Mode for mobile devices, you could try the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "AUTO",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE",
});
jb.onInitComplete = function (){
var screenMode = jb.getScreenMode();
if (screenMode === 'LARGE') {
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
jb.toggleThumbs();
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
}
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
(3) There may also be a timing issue. Introducing a short delay (such as one second in the code below) before toggling the thumbnails might help. (It might not be an ideal solution but doing so should at least tell us whether this is the root of the problem or not.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var thumbs = true;
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
screenMode: "LARGE",
showExpandButton: "TRUE",
showThumbsButton: "FALSE",
showThumbsOnLoad: "TRUE"
});
jb.onExpand = function(expanded) {
if ((expanded && thumbs) || (!expanded && !thumbs)) {
setTimeout(function() {
jb.toggleThumbs();
}, 1000);
}
};
jb.onShowThumbs = function(showing) {
thumbs = showing;
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>
If you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look and hopefully help further.
Please also let me know what version of iOS your device runs and what browser(s) the problem occurs in (Mobile Chrome, Mobile Firefox, Mobile Safari). Thank you.