I was looking for a simple and easy to use JavaScript-based Image gallery tool. After comparing some of the options I chose to use Galleria, which you can download and plug into your code as a basic version for free… the Galleria core engine and the classic theme are open to anyone to use without cost. Since I just needed a basic image gallery to show, this seemed like the perfect tool to use.
As part of the process of hooking up my images to the Galleria API, I tried out one of the complete code examples hosted on the Galleria beginners guide. Rather surprisingly I found out that the full code sample didn’t work for me. Rather than seeing a nice gallery of my image files, I got an error on my page: Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.
I did my testing primarily with Internet Explorer 11, but similar reports for this error exist online for various different browsers.
After spending some time playing around with the broken code from the Galleria example page, I finally got things to work. I’m including my functional working example at the end of this article.
Fixing the Imported Libraries
For starters, I found that one does not need to reference the full development JQuery library, so I changed the reference to the compressed JQuery production library instead.
Also, I imported the Galleria Classic theme CSS for the example. I was surprised that the basic example given by Galleria did not reference this file.
The order that I imported the libraries turned out to be important since they are dependent on each other. Thus, the final order that worked for me was:
- The Galleria Classic CSS theme
- The minified JQuery 1.11.0 library
- The minified Galleria 1.3.5 JavaScript library
- The minified Galleria Classic Theme JavaScript library
Fixing the Fatal error: Could not extract a stage height from the CSS
Including these files was good, but did not fix the error message that I was seeing. It took me a while to track down the culprit. What finally ended up being needed to get things working, was to include CSS formatting for the Galleria display div tag.
Specifically, I added this CSS to the page header:
<style type="text/css">
.galleria {
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow: hidden;
}
</style>
The majority of this formatting is not necessary to fix the Galleria error. What ended up being the culprit was the left and right edges of the Galleria element. So if you were to cut out the other CSS formatting, the essential formatting to fix the error would be:
<style type="text/css">
.galleria {
left: 10px;
right: 10px;
}
</style>
The Full Working Galleria Example
Once I had added my fixes to the example code I got from the Galleria Beginners Guide, the gallery worked nicely. Here is my tweaked version of their example that displayed the Galleria tool in the Classic theme. Running it gives you a full browser window rendering of your images:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="galleria/galleria-1.3.5.min.js"></script>
<script type="text/javascript" src="galleria/themes/classic/galleria.classic.min.js"></script>
<style type="text/css">
.galleria {
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="galleria">
<img src="image_files\APicture_Part0.jpg">
<img src="image_files\APicture_Part1.jpg">
<img src="image_files\APicture_Part2.jpg">
<img src="image_files\APicture_Part3.jpg">
<img src="image_files\APicture_Part4.jpg">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria');
</script>
</body>
</html>
Justin Cooney 
Hi Justin, I just read your article, it was very helpful to me, thank you so much for sharing your solution for this issue.