

JavaScript ライブラリの [Galleria](http://galleria.io/) で画像ギャラリーを実装しましたが、

[code]

    Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.
    
[/code]

というエラーが出てしまいます。

[code]

    #galleria {
      height: 500px;
    }
    
[/code]

のように `height`
を指定することで問題無く動くようにはなったのですが、中に入る画像のサイズは実装ページによって異なるので、高さ数値は固定ではありません。

ギャラリーの高さを固定することなく動かしたいのですが、解決策をご教示頂きたく存じます。

# ソースコード追記します。

これで再現します。styleに`#galleria{height: 500px;}`を入れるとちゃんと動きます。

[code]

    // Load the classic theme
    Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.min.js');
    
    // Initialize Galleria
    Galleria.run('#galleria');
[/code]

[code]

    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.css" />
    
    <div id="galleria">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/250px-Lion_waiting_in_Namibia.jpg">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Okonjima_Lioness.jpg/250px-Okonjima_Lioness.jpg">
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/galleria.min.js"></script>
[/code]


CC BY-SA 3.0
2015-01-16T06:23:48.570
4670
2015-08-15T19:49:47.537
2015-01-16T15:09:41.517
33
7464
question
javascript css jquery galleria
Galleriaで高さを指定しないと `Fatal error: Could not extract a stage height from the CSS.` が出てしまう


そのエラーについて、プラグイン提供元に記載があります。  
まずはそこに記載された項目に該当するか確認してみてください。  
[Galleria error messages](http://galleria.io/docs/references/errors/)

要約すると、

  * `$().height()`が`0`であることが原因です。
  * アニメーションの完了が5秒以上かかっていませんか？
  * 要素が`display:none`になっていませんか？

指定された要素の高さが`0`になっている原因がなにか、ということですね。


CC BY-SA 3.0
2015-01-16T06:41:44.420
4672
2015-01-16T06:41:44.420
7214
4670
answer


サイズが判明してから初期化するとか、後から`$('#galleria').width(400).height(300).resize()`等でリサイズするのはダメでしょうか。


CC BY-SA 3.0
2015-01-16T13:54:16.683
4701
2015-01-16T13:54:16.683
5750
4670
answer


現象確認できました。  
どうも`Galleria.run()`で高さを指定してあげないといけないようです。

[code]

    // Load the classic theme
    Galleria.loadTheme('http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.min.js');
    
    // Initialize Galleria
    Galleria.run('#galleria', {
        width:  300,
        height: 200, // ※これが必須
        transition: 'fade', // 画像切替効果
        imageCrop: false, // 画像を縮小して全体表示
        _toggleInfo: false // imgのalt属性をキャプション表示
    });
[/code]

[code]

    <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/themes/classic/galleria.classic.css" />
    
    <div id="galleria">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/250px-Lion_waiting_in_Namibia.jpg">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Okonjima_Lioness.jpg/250px-Okonjima_Lioness.jpg">
    </div>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/galleria/1.4.2/galleria.min.js"></script>
[/code]

`width`は指定しなければ画面全体のサイズになりましたが、`height`だけは指定が必要なようです。  
[height Galleria Docmentation](http://galleria.io/docs/options/height/)

> Galleria need a height to work properly.  
>  (訳：Galleriaが正しく動作するには`height`が必要です。)

実装ページによって高さが異なるとのことですが、必要に応じてこの値は動的に設定をしてあげないといけないようです。


CC BY-SA 3.0
2015-01-17T13:30:03.023
4743
2015-01-17T13:39:56.290
2015-01-17T13:39:56.290
7214
7214
4670
answer