• Registered: 2012-07-04
  • Posts: 2

Topic: Juicebox not loading on webpage but loads on reload

Hi, I have embedded Juicebox in the wedding section on my webpage(http://memologue.chia90.com/portfolio.html)
However when entering that page, it will be a blank screen and upon pressing F5, page refreshes and it appears, kindly assist me thanks!

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

Re: Juicebox not loading on webpage but loads on reload

Try validating the code on your web page with the W3C Markup Validation Service and fix the errors reported.
Once the code validates OK, your web page function correctly.

Your page loads the 'juicebox.js' file twice. Only one instance is required.

Try removing the <p> and </p> tags from around the embedding code. <p> </p> tags should not contain block-level elements such as the gallery's <div> container.

Also, try using folder names that do not contain spaces. As each folder forms part of a URL when it is uploaded to a web server, it would be wise to use only web-safe characters for files and folders.
Please see section 2.3 of this document for details.

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.

  • Registered: 2012-07-04
  • Posts: 2

Re: Juicebox not loading on webpage but loads on reload

Hi Steven, thanks for your prompt help, I have tried and played around with what was mentioned and the validator has validated but my webpage still cant function. I aint sure why I am still having the same issue.

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

Re: Juicebox not loading on webpage but loads on reload

On further investigation, the problem is caused by your use of jQuery Mobile.
You will need to add the attribute rel="external" to the link to your 'Weddings.html' page on your 'portfolio.html' page, i.e.:

<li><a href="Weddings.html" rel="external">Weddings</a></li>

Please see the Link formats documentation for jQuery Mobile for more information.