• Registered: 2012-10-04
  • Posts: 5

Topic: Problems viewing on Android

Hello guys,

Firstly, thanks a lot for the awesome gallery. It's easily the best HTML5 gallery out there so far :)

Now, I have a little problem viewing the gallery on my Android phone. Instead of displaying the usual gallery, it shows a black screen saying "View Gallery" at the bottom left corner and once I clicked on that, it takes me into the full screen mode. Which is so far so good. The trouble comes when I exit this gallery and wish to view other gallery on my CSS drop-down link. After clicking on the link to other gallery, all that is shows is just a static picture of the first image in the gallery. No Juicebox at all.

Here's my website: www.hendrarphotography.com

Hope to get some help! :)

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

Re: Problems viewing on Android

Instead of displaying the usual gallery, it shows a black screen saying "View Gallery" at the bottom left corner and once I clicked on that, it takes me into the full screen mode.

This is the Splash Page which is displayed in Small Screen Mode when the gallery is embedded in a web page alongside other content. By default, it will display the first image in your gallery. Juicebox-Pro users can choose the image to be used for the Splash Page with the splashPageUrl configuration option.
Your own gallery's Splash Page may be black due to the use of reserved characters (spaces and parentheses) in your image file names. Try using only web-safe characters for file and folder names.
Please see section 2.3 of this document for details: http://www.ietf.org/rfc/rfc3986.txt

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

The trouble comes when I exit this gallery and wish to view other gallery on my CSS drop-down link. After clicking on the link to other gallery, all that is shows is just a static picture of the first image in the gallery. No Juicebox at all.

Try validating your web pages with the W3C Markup Validation Service and fix the HTML errors reported.
Your 'welcome.php' page generates a web page which has 4 <html> tags, 4 <head> tags and 3 <body> tags. Each web page should have only one of each.
Once your code validates, your web pages should be rendered with greater predictability and consistency across different browsers.

  • Registered: 2012-10-04
  • Posts: 5

Re: Problems viewing on Android

Thanks for the detailed reply Steven! Let me have a go at it this weekend.

Thank you once again!

  • Registered: 2012-10-04
  • Posts: 5

Re: Problems viewing on Android

Hi Steven,

I've went through the steps you mentioned, my welcome page doesn't have multiple <head> & <body> tags anymore, and I've renamed my pictures from portfolio(1) to portfolio-1, etc.

Now, I don't see the black display anymore, but now my gallery is stuck at the first image.

Thank you in advance for your help! :)

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

Re: Problems viewing on Android

Your web page still does not contain valid code.
You have code above the opening <head> tag which should be within the <head> section and code between the closing </head> tag and opening <body> tag which should be within the <body> section.
However, the problem you currently experience is due to the Splash Page's overlay (allowing the user to click on the Splash Image to view the gallery) not being visible.
This is likely to be caused by the following generalized CSS on your web page:

            body {
                margin: 0px;
                z-index: 0;
            }
            
            script {
                z-index: 0;
            }
            
            div {
                z-index: 0;
            }
            
            *{ 
                margin: 0px; 
                padding: 0px;
                z-index: 100;  
            }

Instead of applying CSS rules to set a 'z-index' value to essentially all elements on your web page (which will also affect all elements within your gallery), set a 'z-index' value to only those elements on your web page that require it (and make sure that the value is appropriate) via the use of classes and ids.
Please see this CSS Tutorial for further information on using classes and ids.
As a quick fix, you could try simply removing all the 'z-index' entries from the CSS on your page. It looks like this might work fine.

6 Reply by hendra_raghani (edited by hendra_raghani 2012-10-08 14:04:33)

  • Registered: 2012-10-04
  • Posts: 5

Re: Problems viewing on Android

Hi Steven,

Removing the z-index solved the display problem. Once again, thanks so much! :)