<![CDATA[Juicebox Support Forum — Force thumbnails [SOLVED]]]> https://juicebox.net/forum/viewtopic.php?id=5234 Tue, 30 Mar 2021 21:58:45 +0000 PunBB <![CDATA[Re: Force thumbnails [SOLVED]]]> https://juicebox.net/forum/viewtopic.php?pid=17899#p17899 I'm glad to hear that you've settled on the easy solution!
Thank you for letting me know. I'll mark this thread as [SOLVED].

]]> Tue, 30 Mar 2021 21:58:45 +0000 https://juicebox.net/forum/viewtopic.php?pid=17899#p17899 <![CDATA[Re: Force thumbnails [SOLVED]]]> https://juicebox.net/forum/viewtopic.php?pid=17897#p17897 All sorted thanks.
I disabled the auto play; I wasn’t too keen anyway.

]]> Tue, 30 Mar 2021 18:31:13 +0000 https://juicebox.net/forum/viewtopic.php?pid=17897#p17897 <![CDATA[Re: Force thumbnails [SOLVED]]]> https://juicebox.net/forum/viewtopic.php?pid=17895#p17895 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.

]]> Tue, 30 Mar 2021 11:22:42 +0000 https://juicebox.net/forum/viewtopic.php?pid=17895#p17895 <![CDATA[Force thumbnails [SOLVED]]]> https://juicebox.net/forum/viewtopic.php?pid=17893#p17893 I have set the following;
General- screen size- auto
Thumbnails- show thumbs on load- tick
Thumbnails- show small thumbs on load- tick

Still it doesn't default to thumbnails on an iPhone size breakpoint.
What am I doing wrong?
I want to force this to happen.

]]> Tue, 30 Mar 2021 09:21:19 +0000 https://juicebox.net/forum/viewtopic.php?pid=17893#p17893