締切済み

ページ内に複数のJQueryスライドを設置したいが

2013/08/17 19:42

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> <p id="close1"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> <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> <p id="close2"><img src="../common/img/photograph/slide/close.png" alt="close"></p> </div> /* オーバーレイ用と、オーバーレイ表示を閉じるボタン用のスクリプト */ <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>