web-dev-qa-db-ja.com

ガレリアの致命的なエラー：CSSからステージの高さを抽出できませんでした。トレースされた高さ：0px

行<style type="text/css"></style>が空の場合でも、ガレリアは「致命的なエラー：CSSからステージの高さを抽出できませんでした。トレースされた高さ：0px」というエラーメッセージをスローします。

ガレリアに300の高さを使用するように指示している場合でも、次のように表示されます。

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

最初に高さを決定しようとし、CSS行で混乱を招くため、このエラーがスローされます。その1行を削除すれば、それ以上のエラーはありません。

とにかく<style type="text/css"></style>をまだ使用できますか？使用する顧客に基づいて、サイトの外観をカスタマイズするために使用します。

jquerygalleria
36
SLoret

必ず以下を含めてください：

頭：

<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>

ページ内スタイルでも：

#galleria{height:467px}

そして画像の下：

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

これに問題がある場合は、クリーンインストールでトラブルシューティングを行い、原因が見つかるまで追加してください。

53
Emilio

ガレリアイメージコンテナーの高さをcssで指定する必要があります。これは、ガレリアが画像を表示する場所です（したがって、ガレリア自体の高さよりも小さくなければなりません）。

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

それはまだこのエラーを受け取る人を助けるかもしれません：-

ギャラリーが隠れていたため、このエラーが発生しました。

FIX：-CSSでギャラリーdivに高さを指定し、次にjsファイルで、

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

詳細については、次のリンクを参照してください。 http://galleria.io/docs/references/errors/

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

10
Divyanshu Das

IEでのみこのエラーが発生しました。解決策は、高さを強制することです。

Galleria.classic.css CSSで、クラスの高さを追加.galleria-stage

例。

.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;
}
5
Dacarts

Scenerio

これがあなたに起こっている場合、それはおそらくページがロードされるときあなたがギャレリア要素を隠しているからです。これは他のいくつかの回答で言及されていますが、それらの回答が概説する解決策は必ずしも最良の方法ではありません。

問題

私の場合、ページの起動時にGalleriaコンテナをdisplay:none;に設定しています。 Galleriaオブジェクトはライトボックス内にあるため、ユーザーがボタンをクリックするまで表示されません。このdisplay:noneプロパティが問題の原因です。

解決

display:none;で要素を非表示にする代わりに、left:-9999px;やmargin-left:9999pxのような大きな負の左マージンを使用します。これらの方法のいずれかにより、Galleriaが適切にロードされます。

3
VictorKilo

Galleria.classic.cssファイルの.galleria-stage cssクラスで高さと幅を設定するとともにクラシックテーマを使用している場合は、DocTypeを以下のように設定してください。

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

JQuery galleriaの使用中に同じ問題が発生し、解決しました。 galleria-1.2.5.min.jsのいくつかのパラメーターを変更しました。

ここ は、ライブラリをダウンロードするためのリンクです。コードをコピーして、jsファイルに貼り付けてください。

2
simo

指示 、セクションSetting dimensions、CSSでこれを行います（明らかに#galleriaラッパーをどのように識別したとしても、私はgalleriaというクラスを使用するので、.galleria）

#galleria { width: 700px; height: 400px; }
1
Serj Sagan

私は同じ鉛を使用していました。それから私は何か他のものを試しました。すべての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>

私はこの方法でコーディングするのは本当に幸せではありません（つまり、最後にjavascript）。とにかくうまくいくようで、ギャラリーは素晴らしいです！

1
youn

上記のすべてがうまくいかなかったため、この質問への回答を追加しています。私の場合、組み込みのクロスドメインjavascriptウィジェット内でgalleria（1.2.7）を動的にロードしていました。ステージの高さが正しく設定されていても、スクリプトがロードされ、ガレリアが正しく初期化されたため、このエラーメッセージが定期的に表示されました。

ガレリアのソースを修正して、エラーメッセージが表示されないようにしました（おそらく、これをデバッグフラグに依存させる方が良いでしょうが、必要性は感じませんでした）

Galleria.raise = function( msg, fatal ) {

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

        self = this,

        css = {
            display: none;
        },
1
Jesse