ページ内に複数の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>
お礼
ご回答を頂いた皆様 今回は貴重なお時間を割いてたくさんのアドバイスをいただきまして、 本当にありがとうございました。 特にご回答を頂いた皆様からのアドバイスは、 凝り固まっていた自分の発想の転換になり、 アイディアが湧いてくるようになりました。 皆様がいなかったら、投げ出していたかもしれません。 ご相談させいただけて助かりました。 私の成長を期待していてください。 これからも、ご指導の程、よろしくお願いいたします。 今回は貴重なご回答ありがとうございました。