ページ内に複数の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>
お礼
早々のご対応ありがとうございます。 しかしながら、書き換えをしたのですが、 画像は上下に出たままでスライドしませんでした。 他にも何か原因があるようなのですが、 お教えいただけますでしょうか？