Galleria Fatal error: Could not extract a stage height from the CSS. Traced height: 0px

Question

If I have the line <style type="text/css"></style> , even though it is blank, Galleria throws the error message "Fatal error: Could not extract a stage height from the CSS. Traced height: 0px."

It would appear that even though I'm telling galleria to use a height of 300 via:

$('#galleria').galleria({ 
width: 300, 
height: 300, 
transition: 'fade' 
}); 

it tries to first determine the height and the CSS line is confusing it, so it throws this error. If I remove that one line, no more error.

Is there anyway I can still use <style type="text/css"></style>? we use it to customize the look and feel of our site based on the customer using it.

Devlen

Which version of galleria are you using? – Egeria

After working on this for hours, I finally gave up and decided to come back to it latter. When I came back to it, everything was working fine. I have no idea what the solution is, the only thing I can think of is that I had a two referrences to the same js in my code somewhere that was causing confusion. Thank you to all that answered. – Devlen

I'm seeing this when the gallery is hidden at page load time, i.e. it is on a non-active tab. wrote it up in the forums: getsatisfaction.com/galleria/topics/… – Macdermot

Answer 1

Make sure you include:

Head:

<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script type="text/javascript" src="js/galleria-1.2.5.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>

Also the in page style:

#galleria{height:467px}

And below the images:

<script type="text/javascript">
$('#gallery').galleria({
width: 700,
height: 467 //--I made heights match
});
</script>

If you have problems with this troubleshoot with a clean installation and add until you find the cause.

Kaykaya

My solution can be used too. (while using twitter bootstrap). The most common error is caused from invisible element (hidden). So I assume that it can be executed (or make galleria runs) when the element shown. $('#myTab li:eq(0) a').click(function (e) { e.preventDefault(); $(this).tab('show'); Galleria.run('#slide', {width: '100%', height: 340}); }); – Dosser

Thanks! I was missing this: #galleria{height:467px} – Vientiane

What if I don't want to specify a height. Like on responsive layouts? – Quartzite

Thanks so much! min-height was missing for me only on some pages – Walli

Answer 2

It might help some one, who still gets this error:-

I got this error because I had a hidden gallery.

FIX:- Give the gallery div a height in CSS, then in js file,

Galleria.run('#gallery', {
  height: parseInt($('#gallery').css('height')),
  wait: true
 });

See these links for more info:- http://galleria.io/docs/references/errors/

http://galleria.io/docs/options/wait/

Zucker

This got the job done for me, thanks! The wait parameter will force the gallery to only initialize once the DOM element is visible. – Quadruplicate

Yeah! It was exactly this. The images were there, but they weren't loading in time for the stage to get their height. A huge thank you! – Gnosticize

Answer 3

You need to give the galleria image container a height in css. This is where galleria shows the images in (so it should be smaller than the height of galleria itself).

.galleria-stage {
    height: 450px;
    position: absolute;
    top: 10px;
    bottom: 60px;
    left: 10px;
    right: 10px;
    overflow: hidden;
}

Serendipity

This was causing some offsetHeight bug in Opera Mobile 12 to rear its head, causing Galleria to throw its hands up and refuse to function. Explicitly giving the stage a height and width cured the problem for me. – Angulation

Answer 4

I had this error only in IE. The solution is to force the height.

In the galleria.classic.css CSS add a height for the class .galleria-stage

example.

.galleria-stage { 
  height:450px; <-- set this to any height and i should work :)
  position: absolute; 
  top: 10px; 
  bottom: 60px; 
  left: 10px; 
  right: 10px; 
  overflow:hidden;
} 

Halfhearted

This was causing some bug in Opera Mobile 12 to rear its head. Explicitly giving the stage a height and width cured the problem for me. Great tip, thanks! – Angulation

Answer 5

Scenerio

If this is happening to you, it is most likely because you have the Galleria element hidden when the page loads. This is mentioned in a couple of other answers, but the solutions that those answers outline are not necessarily the best methods.

Problem

For me, I have the Galleria container set to display:none; when the page launches. The Galleria object is in a lightbox, so it does not show up until the user clicks on a button. This display:none property is what is causing the issue.

Solution

Instead of hiding the element with display:none; use a large negative left margin like left:-9999px; or margin-left:9999px. Either of these methods will ensure that Galleria loads properly.

Televisor

This approach is what I went with. In my case, I used left: o; top: -2000px; in order to keep the total area that needs to be rendered/processed down, as it can apparently affect performance on slower devices. – Unclog

These huge margins will require additional steps in order for your page to be visible correctly in some mobile browsers... – Stationmaster

Thanks for the input! For me it has worked because the height of all pages is fairly short. If you have very long pages, a left margin could affect performance. The jist of my solution is to find a way to hide the gallery without using display:none. – Televisor

Answer 6

Try to set the DocType as below if you are using classic theme along with setting the height and width in .galleria-stage css class in galleria.classic.css file

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">

Egeria

I was getting the stage height error in IE only. The comments about the "height" did not solve it for me but adding this DocType did. Thanks! – Denver

Answer 7

I had the same problem while using jQuery galleria and I solved it. I modified some parameters in galleria-1.2.5.min.js.

Here is the link to download the library, just copy the code and paste it in your js file.

Ellaelladine

Answer 8

i used to have the same pb. then i tried something else. all my javascript files used to be at the end of my html file. so i tried to move them all to just before the </head> closing tag .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="lib/galleria/galleria-1.2.5.js" /></script>
<script type="text/javascript" src="lib/galleria/themes/classic/galleria.classic.min.js"></script>
</head>

i'm not really happy coding this way (ie javascript at the end). anyway it seems to work and the gallery is great !

Sumrall

Answer 9

I'm adding an answer to this question as all of the above didn't work for me. In my case I was loading galleria (1.2.7) dynamically within a embedded cross domain javascript widget. Even though the stage height was set correctly, the scripts were loaded and galleria initialized correctly this error message would periodically display.

I ended up modifying the galleria source to suppress error messages from displaying (perhaps a better option would be to make this dependent on the debug flag, however I didn't feel the need)

Galleria.raise = function( msg, fatal ) {

    var type = fatal ? 'Fatal error' : 'Error',

        self = this,

        css = {
            display: none;
        },

Cullet

Answer 10

As per the instructions, section Setting dimensions , do this in your CSS (obviously switch out #galleria for what ever way you id your wrapper, I use a class called galleria so I use .galleria)

#galleria { width: 700px; height: 400px; }

Stationmaster

Answer 11

After several attemps, none of the above solutions worked for me. Is a strange bug, as it's difficult to replicate and trace, sometimes work and sometimes not.

But trying things found on the net, this one seems to work, by the moment. For those stuck with this i guess it's worth a try:

• Open galleria-1.2.6.min.js
• Replace timeout:1E4 string for timeout:1E10

Muddlehead