Topic: Force #expanded or full.html on smallscreen

Hi,

I'm using Juicebox for years now for my personnal website. Since I recently upgrade my computer for Mac with a retina display, I realized I needed to update my gallery to recover sharp images.

After some brainstorming and work I finally get something looking good, but there is one last thing that I want to change : the gallery behavior on small screen (smartphone especially). When viewing a gallery on smartphone, user can scroll up & down, pinch to zoom in & out etc ...

I finding that using #expanded or full.html worked perfectly so I was wondering if and how it would be possible to force using one or the other when the gallery is viewing on a smallscreen. Using the splash page does the job but ... I don't want to use the splash page so ... Is there a way ?

Here's my website (work in progress, only the "Foudre" gallery is active) : test.alexismaillard.com

Thanks ! Alexis

Re: Force #expanded or full.html on smallscreen

Unfortunately, there's no easy way to force a gallery to go expand automatically. Juicebox was not designed with this in mind.

You could try adding #expanded to the URL you use in your 'Entrer' link to the gallery but I can't guarantee it'll work (or be trouble-free).

Otherwise, you could maybe use the Juicebox-Pro API to trigger a gallery expansion on loading the gallery.
Something like this:

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryHeight: "400",
        galleryWidth: "600",
        showExpandButton: "TRUE"
    });
    jb.onInitComplete = function() {
        jb.toggleExpand();
    };
</script>
<div id="juicebox-container"></div>

I'm not sure if this will help but I hope that it points you in the right direction.

Re: Force #expanded or full.html on smallscreen

Thanks for the help.

Adding #expanded in the Entrer button link was not really effective as it trigger expanded mode also for large screen and I don’t want that. I think I will go with the splash page. Even if it add an extra step for viewing the gallery on smartphone.

And it drives me to another point I can’t figure : when the splash page is active, the Thumb and Nav buttons are not aligned on the top right of the gallery when viewing on smartphone. Now if I disable the splash page, viewing the gallery on smartphone with #expanded and the buttons are perfectly aligned.

#expanded without splash page activate
https://i.ibb.co/BBrCszN/AB1-F66-D8-8-EBA-4-A43-B27-E-2564-F445175-F.png



#expanded with splash page activate
https://i.ibb.co/MV0wFfB/B367-CF11-83-EF-422-E-96-C4-745-A7-F6-CD1-C6.png

Do you have any ideas ?

Re: Force #expanded or full.html on smallscreen

I expect the empty space to the right of the Button Bar is due to Juicebox reserving space for the Expand Button but your gallery sets showExpandButton="FALSE". I do not think you'd see the space if your gallery were to set showExpandButton="TRUE" instead.

Setting a Button Bar icon to FALSE should not result in empty space to the right of the Button Bar (this is, indeed, a bug) but, the way Juicebox has been designed, the Expand Button should be displayed (even though your gallery sets showExpandButton="FALSE").
Using the Splash Page to expand the gallery is, internally, no different to using the Expand Button and if either the Splash Page or Expand Button are being used, then the Expand Button (in its Close Gallery state) ought to be present to allow the visitor to close the expanded gallery. (At least, that's how I expect the developers envisioned this functionality.)
There is no way to have the Expand Gallery button present but hide the Close Gallery button. Likewise, if using the Splash Page.

Long story short, it's a bug but it's a known bug which has already been logged and will hopefully be fixed in a future version.
In the meantime, the workaround is to set showExpandButton="TRUE" (which is essentially what the bugfix will likely do anyway).

Also, with regard to your your first note, you could perhaps use JavaScript to add #expanded to your link but only on mobile devices. Maybe something like this:

<a id="link">Link goes here.</a>
<script>
    var isMobile = /Android|BlackBerry|iemobile|iPad|iPhone|iPod|Nexus|Opera Mini|webOS|Windows Phone|WPDesktop/i.test(navigator.agent);
    var linkSrc = 'http://www.example.com/index.html' + (isMobile ? '#expanded' : '');
    document.getElementById('link').setAttribute('href', linkSrc);
</script>

Otherwise, for the Juicebox-Pro API suggestion, something like this might work:

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryHeight: "400",
        galleryWidth: "600",
        showExpandButton: "TRUE"
    });
    jb.onInitComplete = function() {
        var isMobile = /Android|BlackBerry|iemobile|iPad|iPhone|iPod|Nexus|Opera Mini|webOS|Windows Phone|WPDesktop/i.test(navigator.agent);
        if (isMobile) {
            jb.toggleExpand();
        }
    };
</script>
<div id="juicebox-container"></div>

Whatever mechanism you use to detect a mobile device, it will likely differ slightly from Juicebox's own logic which determines whether to use Small Screen Mode or Large Screen Mode but you should be able to get quite close and catch most cases.