jQuery Galleria 致命错误:无法从 CSS 中提取舞台高度。跟踪高度:0px
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6610522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Galleria Fatal error: Could not extract a stage height from the CSS. Traced height: 0px
提问by SLoret
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."
如果我有一行<style type="text/css"></style>
,即使它是空白的,Galleria 也会抛出错误消息“致命错误:无法从 CSS 中提取舞台高度。跟踪高度:0px。”
It would appear that even though I'm telling galleria to use a height of 300 via:
看起来,即使我告诉 Galleria 通过以下方式使用 300 的高度:
$('#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.
它首先尝试确定高度,而 CSS 行混淆了它,因此会引发此错误。如果我删除那一行,就不会再有错误了。
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.
反正我还能用<style type="text/css"></style>
吗?我们使用它来根据使用它的客户定制我们网站的外观。
回答by Emilio
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.
如果您遇到此问题,请使用全新安装进行故障排除并添加,直到找到原因为止。
回答by SaphuA
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).
您需要在 css 中为 Galleria 图像容器指定一个高度。这是画廊展示图像的地方(所以它应该小于画廊本身的高度)。
.galleria-stage {
height: 450px;
position: absolute;
top: 10px;
bottom: 60px;
left: 10px;
right: 10px;
overflow: hidden;
}
回答by Divyanshu Das
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,
修复:-在 CSS 中给画廊 div 一个高度,然后在 js 文件中,
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/references/errors/
回答by Dacarts
I had this error only in IE. The solution is to force the height.
我只在 IE 中有这个错误。解决方法是强制高度。
In the galleria.classic.css CSS add a height for the class .galleria-stage
在 Galleria.classic.css CSS 中为类添加高度 .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;
}
回答by VictorKilo
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.
如果您遇到这种情况,很可能是因为您在页面加载时隐藏了 Galleria 元素。其他几个答案中提到了这一点,但这些答案概述的解决方案不一定是最好的方法。
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.
对我来说,我将 Galleria 容器设置为display:none;
页面启动时。Galleria 对象位于灯箱中,因此在用户单击按钮之前它不会显示。此display:none
属性是导致问题的原因。
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.
而不是display:none;
使用大的负左边距来隐藏元素,如left:-9999px;
或margin-left:9999px
。这些方法中的任何一种都将确保 Galleria 正确加载。
回答by simo
I had the same problem while using jQuery galleria
and I solved it.
I modified some parameters in galleria-1.2.5.min.js.
我在使用 jQuery 时遇到了同样的问题galleria
,我解决了。我在 Galleria-1.2.5.min.js 中修改了一些参数。
Hereis the link to download the library, just copy the code and paste it in your js file.
这是下载库的链接,只需复制代码并将其粘贴到您的 js 文件中即可。
回答by ShankarSangoli
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
如果您使用的是经典主题并在 .galleria-stage css 类中设置高度和宽度,请尝试如下设置 DocType
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
回答by youn
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 .
我曾经有相同的 pb。然后我尝试了别的东西。我所有的 javascript 文件过去都在我的 html 文件的末尾。所以我试图将它们全部移到</head>
结束标记之前。
<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 !
我不太喜欢用这种方式编码(即最后的 javascript)。无论如何它似乎工作,画廊很棒!
回答by Jesse
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.
我正在添加这个问题的答案,因为以上所有内容对我都不起作用。就我而言,我在嵌入式跨域 javascript 小部件中动态加载了 Galleria (1.2.7)。即使舞台高度设置正确,脚本已加载并正确初始化,此错误消息也会定期显示。
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 源以抑制显示错误消息(也许更好的选择是使其依赖于调试标志,但是我觉得没有必要)
Galleria.raise = function( msg, fatal ) {
var type = fatal ? 'Fatal error' : 'Error',
self = this,
css = {
display: none;
},
回答by Serj Sagan
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
)
按照说明,部分Setting dimensions
,在你的CSS
(显然切换到#galleria
你标识你的包装器的任何方式,我使用一个名为 Galleria 的类,所以我使用.galleria
)
#galleria { width: 700px; height: 400px; }