1 Topic by fabienismyfriend (edited by fabienismyfriend 2025-07-20 23:41:27)

  • Registered: 2025-07-20
  • Posts: 3

Topic: Gallery does not display correctly on mobile devices

Splash Page Display Issue on Mobile Devices

Hello,
I believe I’m experiencing the same SPASH PAGE problem that vincefx reported back in 2023.

I've been using JuiceBox for several years, and I've noticed that my gallery does not display correctly on mobile devices (iPhone – tested on Safari, Firefox, and Chrome). It works perfectly on a Windows PC, but when I click a link to access the gallery from my smartphone : a fullscreen version of the first image.

The JavaScript seems to load properly (I’ve checked), but the gallery container is replaced by the first photo in the list.

From what I understand, this might be related to how the script is embedded. I suspect you might recommend avoiding the use of a table for layout purposes (may be to be replace by CSS flexbox ?), but before making any changes, I’d prefer to ask.

Thanks in advance for your help!

The link to my last website (I try to do my best with index.html & config.xml ;-) : http://lepec.and.co.free.fr/photo/2025gando/
The link to an older one with the same problem :  http://fabien.photo.free.fr/limousin2024/

Thank you for your help

  • Registered: 2012-04-24
  • Posts: 5,966

Re: Gallery does not display correctly on mobile devices

@fabienismyfriend

Your galleries seem to be working as expected when I view them on mobile devices.
If a mobile device has been detected and the gallery is embedded on a web page with dimensions of less than 100% x 100% or if there is other content on the page (i.e. if the gallery is not the only element on the page and does not take up the full page), then the Splash Page will be displayed.
The Splash Page is a placeholder for the gallery which, when tapped, will expand the gallery on a new page of its own (to give the gallery more space).
By default, the Splash Page displays the first image in the gallery. You can change this to any image you like using the splashImageUrl configuration option (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).

There are a few things you could try.

(1) If you simply do not want the Splash Page to appear, then you can set showSplashPage="NEVER" ('Customize -> Splash Page').
(2) Additionally, if you want the Large Screen Mode version of your gallery to be displayed on all devices, then you can set screenMode="LARGE" ('Customize -> General') but please bear in mind that some gallery elements may appear too small on mobile devices.

You could avoid the problem by ensuring that your gallery is the only element on your web page and that its dimensions are 100% by 100%.
Currently, your gallery has a height of 92% and there is a table on the page alongside the gallery.
If you were to remove the table and change the height of the gallery to 100%, then the gallery would fill the page and the Splash Page would not appear (but the gallery would still be displayed in Small Screen Mode on mobile devices which would be beneficial when viewing on small screens).

I'd recommend using the 'index.html' page from a gallery built with JuiceboxBuilder-Pro as a template (where the gallery is the only element on the page).

Also, if you check your current gallery's embedding page with the W3C Markup Validation Service, you'll see that there are some HTML errors on the page (such as a missing </body> tag at the end of the file). The info entries do not need attention but the errors really ought to be fixed.
If a web page does not contain valid HTML code, then the web page might be rendered by the browser in an unpredictable manner. Some browsers are more tolerant towards errors than others but if the code on the page is valid (i.e. no errors), then you can be sure that the page will display with consistency across all browsers.

I hope these notes point you in the right direction.

3 Reply by fabienismyfriend (edited by fabienismyfriend Yesterday 20:08:02)

  • Registered: 2025-07-20
  • Posts: 3

Re: Gallery does not display correctly on mobile devices

Thanks, Stephen, for all this advice.
My main takeaway: to ensure this works, my gallery must be the only element on my web page and its dimensions must be 100% by 100%.
I ran two new tests: without a table (92%) and 100-100%.
They all work well on a Windows PC.

Ref:
http://lepec.and.co.free.fr/photo/2025gando
galleryHeight="92%"
<table
Results on iPhone IOS > >> SplashPage

New 1:
http://lepec.and.co.free.fr/photo/2025gandoxx
galleryHeight="92%"
<header
Results on iPhone IOS > >> SplashPage

New 2:
http://lepec.and.co.free.fr/photo/2025gandox
galleryHeight="100%"
Results on iPhone IOS > >> No SplashPage but 1 image!?

For now, I prefer New 1, because I don't have the gallery directly with New 2.
Why or what do you think?

  • Registered: 2012-04-24
  • Posts: 5,966

Re: Gallery does not display correctly on mobile devices

My main takeaway: to ensure this works, my gallery must be the only element on my web page and its dimensions must be 100% by 100%.

This has to be true in order for the Splash Page to not be used on a mobile device without explicitly setting showSplashPage="NEVER".

New 1:
http://lepec.and.co.free.fr/photo/2025gandoxx
galleryHeight="92%"
<header
Results on iPhone IOS > >> SplashPage

The Splash Page is used on mobile devices in 'New 1' because the gallery is not 100% x 100% and there is another element on the page (a <header>).

New 2:
http://lepec.and.co.free.fr/photo/2025gandox
galleryHeight="100%"
Results on iPhone IOS > >> No SplashPage but 1 image!?

The Splash Page is not used on mobile devices in 'New 2' because the gallery is 100% x 100% and there are no other elements on the page.

The gallery displays in Small Screen Mode when viewed on mobile devices (thumbnails and images on separate pages).  You can navigate between images by swiping left or right and you can view the thumbnail page by tapping the Thumbnail Button on the Button Bar. Please see here for more information about Screen Modes.

The gallery goes straight to the first image in the gallery because you have set firstImageIndex="1" in your gallery's 'config.xml' file. If you remove firstImageIndex="1" from your gallery's 'config.xml' file, the gallery will initially display the thumbnail page (rather than the first image in the gallery).

I hope these notes help to clarify things a little.

5 Reply by fabienismyfriend (edited by fabienismyfriend Today 07:20:16)

  • Registered: 2025-07-20
  • Posts: 3

Re: Gallery does not display correctly on mobile devices

Thanks Stephen,
It’s working now, especially after removing firstImageIndex="1"!
I have two types of pages that work!

New 1:
http://lepec.and.co.free.fr/photo/2025gando
galleryHeight="92%" with <header> (I removed the table)
Results on Windows PC >> Perfect in my opinion, the gallery integrates nicely, and with a common top banner, navigation is easy. You can return to the main page by clicking on the icon (cow!)
Results on iPhone (iOS) >> SplashPage appears, but that’s OK, with one click on the chosen image, it brings you straight to the gallery (in Small Screen Mode).

New 2:
http://lepec.and.co.free.fr/photo/2025gandox
galleryHeight="100%" x 100%
Results on Windows PC >> OK, with an improved title (including an image), but no clickable link back to the homepage. Also, on large screens, the thumbnails are far to the left of the photo, the split view is less appealing to me.
Results on iPhone (iOS) >> No SplashPage, it opens directly, responsive view works well.
The advantage is that the HTML code is very very simple, with no styles.css.

I'm still undecided. I guess you prefer... I mean, recommend 100x100 New 1 ;-) ?

Thanks again, really appreciate it

Edit : I added New 1 bis
http://lepec.and.co.free.fr/photo/2025gandoxx
= New 1 with showSplashPage="NEVER"
Results on Windows PC & iPhone >> OK. I have to check with others mobile devices

  • Registered: 2012-04-24
  • Posts: 5,966

Re: Gallery does not display correctly on mobile devices

I'm glad you're making good progress.

Here are some further notes which may (or may not help)!

Results on iPhone (iOS) >> SplashPage appears, but that’s OK, with one click on the chosen image, it brings you straight to the gallery (in Small Screen Mode).

If you don't want the Splash Page, then you can turn it off (without changing the dimensions of the gallery or anything else on the web page) by setting showSplashPage="NEVER". It sounds like you might actually want the Splash Page (and the gallery to be expanded to fill the page), though.

Results on Windows PC >> OK, with an improved title (including an image), but no clickable link back to the homepage.

You could always use the Back Button to achieve this

Also, on large screens, the thumbnails are far to the left of the photo,

The space between the thumbnails and the main images will depend on a number of factors such as the number of thumbnail columns, the width of the thumbnails, the shape of the main images (e.g. landscape vs portrait), the width of the browser window/monitor. Juicebox does its best to find a good compromise in most scenarios.
You also have thumbsHAlign="LEFT" which pushes the thumbnails to the left (creating more space between the thumbnails and the main images). If you set thumbsHAlign="CENTER", there will be less space between the thumbnails and main images.

.. the split view is less appealing to me., if you like.

You can force a certain Screen Mode by setting either screenMode="SMALL" or screenMode="LARGE" (but bear in mind that this will apply for both desktop browsers and mobile devices).

I'm still undecided. I guess you prefer... I mean, recommend 100x100 New 1 ;-) ?

Gallery layout is a very personal things and it's really more about what you like yourself. I'd only recommend something if I think there's a problem.
New 1 is so close (in terms of gallery dimensions) to not needing a Splash Page. It just boils down to whether or not you actually like the Splash Page and want to use it.
I think I would like New 2 better if thumbsHAlign="CENTER" was used so, as things stand, my vote goes to New 1 (on desktop, at least, and you can decide whether or not you like the Splash Page on mobile).

[Posts split into new thread to separate from original 2023 thread.]