• Registered: 2014-10-28
  • Posts: 2

Topic: Height other than 100% causes gallery to break / mobile phone [SOLVED]

Hi,

If I set a heigh for the gallery to 50%or px amount on a parent div, it works on dekstop browsers but not on mobile phones. On mobile phones, the gallery is rendered static with hyperlinks to click to open the gallery (View Gallery).

If you go to http://rangerrom.com or http://rangerrom.com/books/

you can see this occur

I have tried creating a parent div, with inline style, does not work.


<section style="height: 50%;">
  ...juiceboxcode
</section>


or


<div style="height: 50%;">
  ...juiceboxcode
</div>

I also set this:
imageScaleMode: "SCALE",
galleryWidth: "100%",
galleryHeight: "100%",


So, it WORKS on desktops but not mobile phones, please can you assist with this. I have opened a support ticket as well.

  • Registered: 2014-10-28
  • Posts: 2

Re: Height other than 100% causes gallery to break / mobile phone [SOLVED]

Fixed set splashpage to NEVER

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

Re: Height other than 100% causes gallery to break / mobile phone [SOLVED]

I am glad that you have been able to resolve your problem.
Thank you for posting back to let me know.

For other users reading this thread, the notes below might help to clarify things.

the gallery is rendered static with hyperlinks to click to open the gallery (View Gallery).

What you are describing is the Splash Page.
This is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user taps 'View Gallery', the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.