Having seen your gallery, I think the problem is that you set autoPlayOnLoad="TRUE".
In Small Screen Mode, thumbnails and main images are displayed on separate pages and setting autoPlayOnLoad="TRUE" forces Juicebox to skip the initial thumbnail page and start displaying images.
You'll either need to set autoPlayOnLoad="FALSE" or set screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) to force the gallery to be displayed in Large Screen Mode on all devices and in all browsers so that you see the desktop layout on your iPhone.
Unfortunately, there are no separate autoPlayOnLoad configuration options for Small vs Large Screen Modes. There is just one autoPlayOnLoad configuration option which is shared across both screen modes.
If you really want to initiate AutoPlay in Large Screen Mode only, then you can do so with help from the Juicebox-Pro API.
With the API, you can run custom JavaScript as soon as the gallery is loaded (via onInitComplete), check which screen mode is being used (via getScreenMode) and toggle AutoPlay (via toggleAutoPlay).
Here's some sample embedding code which might help:
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(34,34,34,1)'
});
jb.onInitComplete = function() {
var screenMode = jb.getScreenMode();
if (screenMode === 'LARGE') {
jb.toggleAutoPlay();
}
};
</script>
<div id="juicebox-container"></div>
If you want to initially display thumbnails in Small Screen Mode but want to initiate AutoPlay as soon as a thumbnail is selected, then that is much more complicated. You'll need to toggleAutoPlay when a new image is displayed (via onImageChange) but only if it's the first image to be displayed from a thumbnail page. You'll need a couple of tracking variables: one to determine whether the image being displayed is the first image to be displayed from a thumbnail page and another to keep track of whether or not AutoPlay is currently on.
The following code is not fully tested but it might point you in the right direction:
<script src="jbcore/juicebox.js"></script>
<script>
var autoPlay = false;
var tracker = false;
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(34,34,34,1)'
});
jb.onInitComplete = function() {
var screenMode = jb.getScreenMode();
if (screenMode === 'LARGE') {
jb.toggleAutoPlay();
}
if (screenMode === 'SMALL') {
jb.onImageChange = function(e) {
if (tracker === false) {
jb.toggleAutoPlay();
autoPlay = !autoPlay;
tracker = true;
}
};
jb.onShowThumbs = function(showing) {
if (showing) {
if (autoPlay) {
jb.toggleAutoPlay();
autoPlay = !autoPlay;
}
tracker = false;
}
};
}
};
</script>
<div id="juicebox-container"></div>
I hope this helps.