• From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Topic: Problem 'Expand gallery' with Firefox [SOLVED]

Hi,
I have just updated ally my galleries to 1.5 (no right click button).
If i use Firefox (48 or 42) and I hit 'Expand Gallery' it looks like this on 30% view:
http://www.reisedampfer.de/test/jb1_5.jpg
No problems with Chrome or IE.
Just have a look on www.reisedampfer.de => Neuste Beiträge => f.e Skandinavien 2016 and hit expand gallery.

Is this a bug? Or am I doing something wrong.
Regards
Stephan

at_stephan's Website

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

Re: Problem 'Expand gallery' with Firefox [SOLVED]

First of all, try fixing the HTML errors on your web page. HTML errors can cause problems when web pages are rendered and some browsers can be more tolerant towards errors than others.
Your web page starts with the following code:

<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"><!DOCTYPE html>
<!-- jsn_boot_pro 3.0.2 -->
<html lang="de-de" dir="ltr">
<head>

The Doctype Declaration (<!DOCTYPE html>) should be at the very top of the document (before anything else) and there should be only one opening <head> tag.
Try changing the code above for:

<!DOCTYPE html>
<html lang="de-de" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Next, check your web page for any other HTML errors using the W3C Markup Validation Service and fix any errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.

Hopefully this will help. If not, then the problem may be due to custom CSS on your page conflicting with the gallery's own CSS. If this is the case, then it might help to expand the gallery on a page of its own (where it will not be affected by any custom CSS) by setting expandInNewPage="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Problem 'Expand gallery' with Firefox [SOLVED]

Hi Steven,
because I use Joomla with CSS JSN Boot I do not see this html code in the editor.
Also the failure comes up with updating to 1.5
Nevertheless I will ask JSN about your html remarks.

The solution expandInNewPage="TRUE" would be ok for me, but the gallery did not open in full screen.
See:
http://www.reisedampfer.de/app595898963 … wegen-2014

Where can I get the older version 1.4.4.2? I have deleted this version on my laptop, perhaps I got it still on my PC.

Greets

at_stephan's Website

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

Re: Problem 'Expand gallery' with Firefox [SOLVED]

The solution expandInNewPage="TRUE" would be ok for me, but the gallery did not open in full screen.

This will expand the gallery to fill the browser window rather than the entire screen but because the gallery is expanded on a page of its own, it will not be affected by any custom CSS and should, therefore, display correctly.

Where can I get the older version 1.4.4.2? I have deleted this version on my laptop, perhaps I got it still on my PC.

Unfortunately, older versions of Juicebox-Pro are not available. Download links always point towards the current version.

Your problem is almost certainly due to either HTML errors on your web page or custom CSS which the gallery might be inheriting.

Please try the following:

(1) Make sure that your web page has a valid Doctyle Declaration at the very top of your web page (with nothing, not even any whitespace, above it). Currently, there are a <head> and a <link> tag above your Doctype Declaration (<!DOCTYPE html>). Without a valid Doctype Declaraion in the correct place, browsers will not know what set of standards the code on your web page should conform to and this can cause unpredictable results.

(2) With a valid Doctype Declaration in place, check your web page for any other HTML errors using the W3C Markup Validation Service and fix any errors reported.

(3) Check your web page's CSS for any rules which apply to all instances of certain HTML tags (such as <div>, <img> or <p>) to be sure that your gallery is not inheriting any of your custom CSS. If you find any such generalized CSS rules, target only those elements on your web page which require them using CSS id or class selectors.

(4) Also, I notice that you are embedding your gallery into a container with an id of '1'.
The HTML 4 specifications state that an id should begin with a letter (a-z or A-Z) rather than a digit.
The HTML 5 specifications are more relaxed but as you do not currently have a Doctype Declaration at the very top of your web page (you have a <head> and a <link> tag above it), browsers may not know what set of standards the code on your web page should conform to and using a single digit as an id might be causing a problem. Try embedding your gallery into a container named 'juicebox-container' instead.
Change:

containerId: "1",

.. and:

<div id="1">

... to:

containerId: "juicebox-container",

... and:

<div id="juicebox-container">

The best solution to #4 would be to fix #1 (ensure that the HTML 5 Doctype Declaration is the very first line of code on your web page with nothing above it).

  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Problem 'Expand gallery' with Firefox [SOLVED]

Hi Steven,
thanks for the answers,
(1) to (3) I have reported this to JSN,
(4) I have changed it to "juicbox-container" but the failure still exists. I have changed it form 'default' to "1" within two galleries, because I have embeded more than one gallery in one page. The 'rest' was a copy paste failure ;-)

On my PC I found the older versions of my galleries, also there the failure is present:
http://www.reisedampfer.de/app595898963 … uegge-2011
So it has nothing to do with version 1.5.

So I wait on JSN because of the doc type and html questions.

Regards
Stephan

at_stephan's Website

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

Re: Problem 'Expand gallery' with Firefox [SOLVED]

On my PC I found the older versions of my galleries, also there the failure is present:
http://www.reisedampfer.de/app595898963 … uegge-2011

This web page also has the code:

<head><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

... before the Doctype Declaration:

<!DOCTYPE html>

... (and two opening <head> tags).

I have not been able to exactly replicate your problem but when I remove the Doctype Declaration from a test gallery page of my own, the gallery does not expand correctly (when useFulscreenExpand="TRUE") so it certainly looks like the incorrect location of the Doctype Declaration on your own page may be the cause of your problem.

  • From: Germany Duisburg
  • Registered: 2014-10-31
  • Posts: 10

Re: Problem 'Expand gallery' with Firefox [SOLVED]

Problem solved :-)

Hi Steven, thanks for your replies.
It was NOT a failure of juicebox
It was NOT a failure of JSN (CSS)
It was a fault of a cookie plugin witch 'damaged' the html code.
I have deleted the plugin and everything looks fine.

So it was a good desicion to choose juicebox ;-)

Bye
Stephan

at_stephan's Website

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

Re: Problem 'Expand gallery' with Firefox [SOLVED]

That's great!
Thank you for letting me know.

I notice that your web pages now start correctly with a Doctype Declaration so it certainly looks like your cookie plugin was responsible for inserting the <head> and <link> tags at the top of your web pages (which seems to have been the root of the problem.).

I'm glad to hear that everything's working as it should now.