JQuery勉強中の初心者です。1ページ内に同じタイプのスライドショーを4つ設置しようとしていますが、上手く表示されません。
使用しているのは、Galleriaのクラッシックデーマ(下記URLと同一のもの)です。
http://galleria.io/themes/classic/
これをJQueryでオーバーレイさせ、オーバーレイ表示上にGalleriaのスライドを設置しています。
ページ内にはギャラリーを表示するための4つの画像ボタンがあり、そのボタンをクリックすると、オーバーレイ表示上にそれぞれ違うスライドを表示します。
下記のソースのような記述をしています(文字数の関係で、下記ソースの画像ボタンは2つにしています。)。
しかし、<div id="btn1">~</div>をクリックすると、
オーバーレイ表示上にギャラリーが表示されることはされるのですが、5秒後ぐらいに
ギャラリー画面上に
「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. …
<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"> /* 1つ目のスライドショー用のボックス */
<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"> /* 2つ目のスライドショー用のボックス */
<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>
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
Galleria の option に wait を設定しなければならないようです。
wait のドキュメントに記載されております。
http://galleria.io/docs/options/wait/
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
アップロードファイルの種類に...
-
Javascript初心者|jQueryの.va...
-
ボタンを押すたびに交互に切り...
-
画像マウスオーバーで、checkb...
-
クリックでクリッカブルマップ...
-
デフォルト非表示にしたい。【t...
-
全部のサイコロをjavascriptで...
-
clear機能を失わずにファイルア...
-
jacascriptで作ったドロップダ...
-
jQueryでのドラッグアンドドロ...
-
MAX関数を使ってからLEFT JOIN...
-
javascriptで毎月替わる画像
-
Slick.jsのオプションrtlについて
-
jQueryで、リンクURLの一致を確...
-
フッター上部に謎の隙間
-
HTMLで条件分岐はできますか?
-
大分類・中分類・小分類
-
HTMLですCSSです 画像のように...
-
CSS <div>の入れ子が反映さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Colorboxがうまく設置できません
-
デフォルト非表示にしたい。【t...
-
「画像クリックで音声再生」を ...
-
Javascript初心者|jQueryの.va...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像の表示位置
-
embed要素のsrc属性の値を変更...
-
JQueryでオープニングアニメー...
-
jQueryでのドラッグアンドドロ...
-
全部のサイコロをjavascriptで...
-
JavaScriptでクレイアニメ。ち...
-
bxsliderで最初に縦に複数表示...
-
アップロードファイルの種類に...
-
clear機能を失わずにファイルア...
-
JavaScriptでの画像切り替えを...
-
マウスカーソルに合わせて画像...
-
交互に入れ替わる画像を複数配置
-
サイトに横スクロールのスライ...
-
サムネイルにカーソルを合わせ...
おすすめ情報