• Registered: 2014-12-22
  • Posts: 5

Topic: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

We hope to use JuiceBox on our Wordpress site, but we are using X Integrity Theme.

When JuiceBox is made full-screen in our theme, about 40% of it is cropped underneath our header area. This hides the top ~40% of the photos and looks very unprofessional.

At first I thought the problem might be the weirdly high z-level values for header items in X Integrity. I reduced the z-levels to single-digit values, but it did not help.

I also tried giving components of JuiceBox high z-levels in my browser, but that didn't help either. So I think the problem is more complex than z-levels.

X Integrity won't help us with this as their company, ThemeCo, considers itself your competitor. But, ThemeCo's supported gallery options are not adequate for what we need to do. We think JuiceBox is.

Can you suggest what we need to do to solve this problem? We have tried out a lot of galleries and all of them fall short of what we need. JuiceBox seems to be the one, but it won't work!

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

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

It sounds like your problem may be due to a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug has already been addressed and will be fixed in the next version of Juicebox.
In the meantime, a workaround would be to set expandInNewPage="TRUE" so that, when the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page. However, expandInNewPage is a Juicebox-Pro option which is not configurable in Juicebox-Lite (the free version).
An alternative workaround would be to set useFullscreenExpand="TRUE". When the gallery is expanded, it will cover the user's entire screen instead of just the browser window. Please note that this will work only in browsers which support the Fullscreen API. Please see this web page for a current list of such browsers.

  • Registered: 2014-12-22
  • Posts: 5

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

Thanks for your quick reply.

Currently we're evaluating with the free version (JuiceBox Lite).

useFullScreenExpand=TRUE is lovely and solves the problem on desktop screens. But of course it's not supported by mobile browsers.

In the paid version (JuiceBox-Pro), how does expandInNewPage=TRUE look on mobile/tablet? (Could you point us to a site that does this? Preferably one with images intended to fill or nearly-fill the screen.) Most of our viewers are on iPhone and iPad.

Thanks in advance - and I'll make a separate topic for another question.

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

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

If expandInNewPage="AUTO" (the default value, as used by Juicebox-Lite), then expanding in a new page is the default behavior on iOS devices. Please see the Expand Gallery Behavior support section for more information.

This sample gallery will always expand in a new page (on all devices and in all browsers) either when the Splash Page is clicked in Small Screen Mode or when the Expand Button is clicked in Large Screen Mode:
http://www.juicebox.net/demos/pro/embed … wPage=TRUE

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

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

This bug (whereby elements from the embedding web page may still be visible after a gallery has been expanded) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.

  • Registered: 2014-12-22
  • Posts: 5

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

Great, thank you!

  • Registered: 2014-12-22
  • Posts: 5

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

Argh! Spoke too soon. The Wordpress plugin doesn't appear to be updated. We will wait for that one...

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

Re: WordPress X Integrity Theme - header overlaps JuiceBox [SOLVED]

The WordPress plugin will be updated soon but you can update the plugin to Juicebox v1.4.3 manually by replacing the plugin's 'jbcore' folder ('wp-juicebox/jbcore') with the 'jbcore' folder from the Juicebox-Lite v1.4.3 zip package ('juicebox_lite_1.4.3/web/jbcore').