ページ内に複数のJQueryスライドを設置したいが
JQuery勉強中の初心者です。１ページ内に同じタイプのスライドショーを４つ設置しようとしていますが、上手く表示されません。
使用しているのは、Galleriaのクラッシックデーマ（下記URLと同一のもの）です。
http://galleria.io/themes/classic/
これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。
ページ内にはギャラリーを表示するための４つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。
下記のソースのような記述をしています（文字数の関係で、下記ソースの画像ボタンは２つにしています。）。
しかし、<div id="btn1">～</div>をクリックすると、
オーバーレイ表示上にギャラリーが表示されることはされるのですが、５秒後ぐらいに
ギャラリー画面上に
「Fatal error: Could not extract a stage height from the CSS. Traced height: 0px.」
と表示されます。
どうしてもこのスライドショーを使用したいので、お盆休み中に格闘しましたが、
どなたか分かる方がおられましたら、解決方法をお教えいただけないでしょうか。
何卒よろしくお願いします。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" id="camera-css" href="../common/css/galleria.classic.css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=1.8.3"></script>
<script src="../common/js/galleria-1.2.9.min.js"></script>
<script>
/* オーバーレイ表示用のcss */
<style type="text/css">
#btn1,#btn2 {
display:block;
width: 420px;
height: 281px;
cursor: pointer;
}
#overlay1,#overlay2 {
display: none;
width: 100%;
height:100%;
position: fixed;
top: 0;
z-index: 100;
background: rgba(0,0,0,0.8);
}
#close1,#close2 {
width: 80px;
cursor: pointer;
position:absolute;
top:50px;
right:0;
}
</style>
</head>
<body>
<div id="overlay1"> /* オーバーレイ用のボックス */
<div id="galleria"> /* １つ目のスライドショー用のボックス */
<a href="../common/img/photo/t1.jpg"><img src="../common/img/photo/thumb/t1.jpg",data-big="../common/img/photo/t1.jpg"></a>
<a href="../common/img/photo/t2.jpg"><img src="../common/img/photo/thumb/t2.jpg",data-big="../common/img/photo/t2.jpg"></a>
<a href="../common/img/photo/t3.jpg"><img src="../common/img/photo/thumb/t3.jpg",data-big="../common/img/photo/t3.jpg"></a>
</div><!-- #galleria -->
<p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p>
</div><!-- #overlay1 -->
<div id="overlay2"> /* オーバーレイ用のボックス */
<div id="galleria1"> /* ２つ目のスライドショー用のボックス */
<a href="../common/img/photo/s1.jpg"><img src="../common/img/photo/thumb/s1.jpg",data-big="../common/img/photo/s1.jpg"></a>
<a href="../common/img/photo/s2.jpg"><img src="../common/img/photo/thumb/s2.jpg",data-big="../common/img/photo/s2.jpg"></a>
<a href="../common/img/photo/s3.jpg"><img src="../common/img/photo/thumb/s3.jpg",data-big="../common/img/photo/s3.jpg"></a>
</div><!-- #galleria -->
<p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p>
</div><!-- #overlay2 -->
/* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */
<script type="text/javascript">
$(function() {
$("#btn1").click(function() {
$("#overlay1").fadeIn();
});
$("#btn2").click(function() {
$("#overlay2").fadeIn();
});
$("#close1").click(function() {
$("#overlay1").fadeOut();
});
$("#close2").click(function() {
$("#overlay2").fadeOut();
});
});
</script>
/* ギャラリーをオーバーレイ表示するためのボタン */
<div id="container" class="clearfix">
<div id="btn1"><img src="../common/img/photograph/no1_tbt.jpg" alt="" class="item"></div>
<div id="btn2"><img src="../common/img/photograph/no2_bali.jpg" alt="" class="item"></div>
</div>
/* ギャラリー用オプション＆JQuery呼び出し用 */
<script>
// Load the classic theme
Galleria.loadTheme('../common/js/galleria.classic.min.js');
option = {
width: 900, // 幅
height: 600, // 高さ
imageCrop: false, // 画像のクロップ有無
// true：width/heightにフィットさせるように画像を切り取って表示
// false：画像を全体表示させるように縮小
transition: 'fade', // 画像の遷移イフェクト
_toggleInfo: false, // imgのalt属性を取得してキャプションとして表示
// true：キャプションの非表示
// false：キャプションの表示
}
// Initialize Galleria
Galleria.run('#galleria',option);
Galleria.run('#galleria1',option); /* ←idを分けてみたりしました。 */
</script>
お礼
回答ありがとうございます。 『GOEMON 』『47-ROUNIN-』は予告を見た限りCGCGしていて派手だなぁと思うところもありますが、幽玄の美を感じさせるシーンもありそうなのと、やはり色調がとても美しかったです。是非見ます。 『隠し砦の三悪人』俳優さんが有名な方ばかりで、それが気になって入り込めないかもしれませんが、汚れた衣服や格好にこだわりを感じさせられましたので、見てみようと思います。 以下関係ないことですけど キアヌ・リーブス和装すごく似合ってますね～。 最近見た映画では『黒帯』の落ち着いた色調と静寂がら緊張した空気感が素晴らしかったです。地味な映画と言われているようですが、武道に生きる人の美しい志を感じることができました。