3

JavaScript ライブラリの Galleria で画像ギャラリーを実装しましたが、

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

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

#galleria {
  height: 500px;
}

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

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

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

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

// 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');
<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>

3 件の回答 3

1

そのエラーについて、プラグイン提供元に記載があります。
まずはそこに記載された項目に該当するか確認してみてください。
Galleria error messages

要約すると、

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

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

3
  • heightを指定してあげるとちゃんと動いてくれます。 恐らく、画像ロード前にheight高さを割り出していて、それで0になっているのかと思いました。 ただ、画像サイズが変わる仕様なのでheightを指定したくないのです。 display:noneにもなっていないですし、5秒以上かかっていません。
    – aces
    Commented 2015年1月16日 6:49
  • 5秒以内に要件(この場合$().height()!=0ですね)を満たしていないとダメと書いてありますので、5秒待って指定要素の高さを評価していると思いますが・・・ 現象が再現する簡単なソースコードはないですか?
    – kotatsu
    Commented 2015年1月16日 7:12
  • jsのオプションで5秒以内というのを変えれるのですが、長くしてもダメだったんですよね。。。 現象が再現するコードを追記しました。
    – aces
    Commented 2015年1月16日 9:20
0

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

0

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

// 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属性をキャプション表示
});
<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>

widthは指定しなければ画面全体のサイズになりましたが、heightだけは指定が必要なようです。
height Galleria Docmentation

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

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

1
  • ありがとうございます。では画像の高さをとってきて、Galleria.runheightにあてるようにするほかなさそうですね。
    – aces
    Commented 2015年1月20日 4:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。