1 Topic by gishfan (edited by gishfan 2015-11-18 06:14:17)

  • Registered: 2015-11-18
  • Posts: 6

Topic: Splash page issue on Windows and Android phones

I'm sorry if this has been addressed elsewhere in the forum (I couldn't find it).  I am currently using Juicebox-Pro to embed photo galleries into several pages on my site, and am having an issue when these pages are viewed on mobile phones.  Everything works as it should until the phone is rotated from landscape to portrait mode, or vice versa, while scrolling through the gallery photos.  Do this, and then exiting the gallery and navigating back to the main page causes the embedded splash page to be cropped and left justified.  It seems as if something has happened that has changed the width of the page as reported by javascript, because the embedded media player at top is also affected (going from landscape to portrait mode while viewing the gallery causes it to overflow off the page, while going from portrait to landscape causes the poster image to be sized down).  Zooming in or rotating the phone fixes the issue.  I know that this isn't being caused by the video player, because it also happens on pages that have only photo galleries and no other embeds.  The issue occurs on both Windows and Android phones, but not on iOS.  It only occurs on phones, and not on desktop or larger tablet browsers.

Test (template) page:
http://www.paoprod.com/Projects/Events/ … mplate.htm

Any thoughts on what is happening here and how to resolve it?

I should add that I am using the most recent version of Juicebox-Pro, version 1.4.4.2.

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

Re: Splash page issue on Windows and Android phones

I'm not exactly sure what is causing your problem but your embedding code is a little non-standard (loading the 'juicebox.js' file from a location other than a 'jbcore' folder, using JavaScript to set configuration options in an external file and running the setGallerySize() API method when the resize event is fired) and might somehow be contributing to your problem.

Here are a few things you could check or try.

(1) See if the problem happens in our own Pro Embedded demo gallery.
This might help to determine whether or not the problem is unique to your own web page.

(2) Try locking the viewport on your web page. Change:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

... to:

<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />

(3) You have set buttonBarPosition="NONE". This disables the entire Button Bar, including the Expand/Close Button which is the recommended method of closing an expanded gallery. Try setting buttonBarPosition="OVERLAY" and showExpandButton="TRUE" and try closing the expanded gallery with the Expand/Close Button (to return to your main page).

(4) Try embedding a more basic gallery into your main page as a test case using the recommended baseUrl embedding code here (rather than using your custom JavaScript code). If this works, then you can introduce elements of your custom JavaScript code to see if you can find the source of the problem.

I'm not sure if any of these suggestions will work but I hope they at least point you in the right direction.

3 Reply by gishfan (edited by gishfan 2015-11-19 04:23:54)

  • Registered: 2015-11-18
  • Posts: 6

Re: Splash page issue on Windows and Android phones

After extensive testing, I think I've found the problem.  It seems that this issue is only happening when the code to embed the gallery is inside a <div>.  I created two test pages in which all code - html, styles, and script - has been removed except for a title and the most basic <body> formatting.  The gallery is directly embedded using the baseUrl method and the juicebox.js file is loaded from the jbcore folder.  With the first test page, all works correctly when the phone is rotated while viewing the expanded gallery - exiting back to the main page with the phone in a different orientation from the one it was in when the gallery was opened does not clip the splash page, which expands properly to fill the full width of the display.  With the second test page, the <div id="MainBody"> container has been added, and this is where the issue begins.  Changing the id to a class does not help, nor does changing "MainBody" to any other identifier.  Exiting the gallery by using the phone's back button or the expand/close button gives the same result.

Unfortunately, all the mobile friendly pages on my site use a set template of <div>s for the sake of consistency and ease of styling, so removing this container is not an option.  I really hope there is a solution for this.

without the <div> container:
http://www.paoprod.com/Projects/Events/ … tPage1.htm

with the <div> container:
http://www.paoprod.com/Projects/Events/ … tPage2.htm

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

Re: Splash page issue on Windows and Android phones

Here are two more suggestions that might help.

(1) Rather than using the default setting of expandInNewPage="AUTO", try setting expandInNewPage="TRUE" (to always expand the gallery from the Splash Page in a new page of its own) or expandInNewPage="FALSE" (to always expand the gallery on top of the embedding page). You might find that one of these settings works. (You can find the expandInNewPage configuration option in JuiceboxBuilder-Pro's 'Cuistomize -> General' section.)

(2) Also, when nesting the gallery within parent containers and giving your gallery percentage dimensions, it may be necessary to ensure that all parent containers have dimensions specified via CSS.
For example, if your gallery has a height of 100%, then Juicebox needs to know what its actual height should be 100% of. If the gallery's parent container does not have a height specified via CSS, then Juicebox may not be able to determine the gallery's actual height.
Please see this note regarding Using Percentage Heights.

Hopefully one of these two suggestions will help.

  • Registered: 2015-11-18
  • Posts: 6

Re: Splash page issue on Windows and Android phones

Is there a way to add an event listener to detect when the user exits the gallery?  Setting expandInNewPage="TRUE" isn't appropriate because it causes a poor experience on the phone when swiping through galleries, and the custom javascript used to embed galleries on my site's pages was designed to deal with the variable height problems based on screen resize (or, in the case of phones and tablets, an orientation change).  All works fine on the desktop, but it's still breaking on phones and it seems that the only way to solve the problem is to force a desktop style layout across the board.  None of the solutions proposed are taking care of the issue, and the only thing that seems to work is hard coding a fixed width and height (not at all ideal on a responsive webpage).  Given Android's dominance of the market, if there is no workaround for this I will have no option but to remove Juicebox altogether and look for an alternative.

There has to be some way to fix this problem.  Using the recommended embedding method and eliminating all other script and html, yet still having the issue, seems to indicate that the issue is with Juicebox itself.  Is there a fix for this in the pipeline?  Also, are you seeing what I am seeing, or should I post screenshots?

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

Re: Splash page issue on Windows and Android phones

Is there a way to add an event listener to detect when the user exits the gallery?

Ordinarily, you could use the onExpand(expanded) event from the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '800',
        galleryHeight: '600'
    });
    jb.onExpand = function(expanded) {
        if (expanded) {
            //Gallery has been expanded. Do something.
        }
        if (!expanded) {
            //Gallery has been closed. Do something else.
        }
    }
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Unfortunately, the onExpand(expanded) event is not fired when the gallery is closed having been expanded from a Splash Page. It works only when the gallery has been expanded from the actual gallery display itself.

To clarify (please let me know if this is correct):
Expand gallery -> Rotate device -> Close gallery => Splash page is "cropped and left justified" (until device is rotated again or page is zoomed)
Happens only on Android and Windows mobile devices and only when gallery is nested within parent container.

It certainly might help if I could see exactly what you are seeing so please upload some screenshots somewhere and let me know what devices and browsers you are using and see the problem in.

I may not be able to suggest a fix (it sounds like you have already tried everything that I think might help) but at least I can notify the developers with as much information about the problem as possible.
Thank you.

  • Registered: 2015-11-18
  • Posts: 6

Re: Splash page issue on Windows and Android phones

Yes, that is correct.  Here are some screenshots with test page urls:

http://www.paoprod.com/Projects/Events/ … nshots.htm

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

Re: Splash page issue on Windows and Android phones

Thank you for the screenshots and sample URL.
I have now notified the developers of the issue and they will certainly investigate further.

9 Reply by gishfan (edited by gishfan 2015-11-26 08:04:02)

  • Registered: 2015-11-18
  • Posts: 6

Re: Splash page issue on Windows and Android phones

Well I've found a temporary solution, though it's less than ideal and is a workaround.  Since the url is appended with "#expanded" when the gallery is expanded, adding an event listener to detect changes in the hashtag and using this to force a reload of the page when exiting the gallery (when "#expanded" is removed from the url and window.location.hash becomes the empty string) covers the occurrence of the issue:

window.addEventListener('hashchange', HashTagChange);

function HashTagChange() {
    a = window.location.hash;
    if (a == "") {
        window.location.reload()
    }
}

This can then be surrounded by additional javascript to add the event listener and/or execute the function only for non-iOS devices.  Since I do not force a splash page and it therefore shows only on small mobile devices, the desktop and larger tablet experiences will not be impacted.  Older desktop browsers that don't support "hashchange" will also not be affected.

I view this as a stopgap, however.  It's sloppy and only works consistently when using the phone's back button to exit the expanded gallery, which means that the showExpandButton option must be explicitly set to "FALSE."

I hope the developers tackle this issue in a future update.

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

Re: Splash page issue on Windows and Android phones

Thank you for sharing your workaround. It certainly might help others facing the same problem.