Smoothboxを使ってみたらFlashビデオが前に出て表示が崩れてしまった。

質問

下記サイトの構築でSmoothboxを使ってみたら
Flashビデオが前に出て表示が崩れてしまいました。

テストサイト
http://www.dream-kids.net/yamacine/

Macのsafari3.0.4だとうまく表示できていますが、
MacのFireFox2.0やwinのIE6.0等では表示が崩れてしまいます。

SmoothboxのInline Contentを使っています。
http://gueschla.com/labs/smoothbox/

表示が崩れない方法はありませんでしょうか。
どんなご意見でもかまいませんよろしくお願い致します。

回答No.4

arexis · ベストアンサー

可能性の一つとして書きます。
いまHTMLのスクリプトの羅列の最後に
<script type="text/javascript">
</script>
と言う場所がありますよね？
ここを

<script type="text/javascript">
window.getHeightOld = window.getHeight;
window.getHeight = function(){
return window.getHeightOld() || document.body.clientHeight;
}
window.getWidthOld = window.getWidth;
window.getWidth = function(){
return window.getWidthOld() || document.body.clientWidth;
}

window.getScrollTopOld = window.getScrollTop;
window.getScrollTop = function(){
return window.getScrollTopOld() || document.body.scrollTop;
}

window.getScrollLeftOld = window.getScrollLeft;
window.getScrollLeft = function(){
return window.getScrollLeftOld() || document.body.scrollLeft;
}
</script>

の様にしてみてください。

お礼

arexisさん！
解決できました！！
本当にありがとうございます。
こんなに親身に教えて頂きながら
たいしたお礼もできないのが申し訳ないです。

追伸
オッケイウェーブって本当に素敵なサービスですね。

回答No.3

arexis

あら、駄目でしたか。

いや、前回も書いた通りFlashとかメディア系は普段一切触らない(レスがなかったので#1で可能性を書いただけです^^;)ので私全然詳しくありません。ｗ
止める方法があれば試してみてください。

と言うか、今見たら
XP + IEでもFirefoxでもきちんと表示されているようですね。

お役に立てなくて申し訳ないです^^;

お礼

arexisさん

ご丁寧にコメントありがとうございます。
実は、arexisさんに頂いたヒントをもとに検索し、

下記ブログを発見し修正すると大方のブラウザでは
見えるようになりました。

Flashの裏にコンテンツが隠れるのを回避
http://www.freesia.org/archives/2007/03/flash.html

Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す
http://www.koikikukan.com/archives/2006/03/17-021717.php

ただ、winのIE6ではマップが左上の方に行ってしまい
まだ100%という状態ではありません。

たぶん、smoothbox.cssあたりを修正すればと思い、
試しているのですが、まだ解決しません。
もしわかればよろしくお願い致します。

http://www.dream-kids.net/yamacine/smoothbox.css

回答No.2

arexis

動画とかライブラリとか普段扱わないので苦手なので具体的にと言われると困ってしまいますが(^^;

例えば、このページに限ってですが
smoothbox.js を開いて

function TB_bind(event) {
と言う部分を探す。その直下に1行足して

function TB_bind(event) {
if($('screen')){ ('screen').style.visibility = 'hidden'; }
として、

function TB_remove() {
を
function TB_remove() {
if($('screen')){ $('screen').style.visibility = 'visible'; }

と書き換えた場合はどんな感じになりますか？

あれこれ詰め込んであるページなのでテストはしていません。

お礼

arexisさん
ご提案ありがとうございます！
早速、今朝から試しましたが、ご提案通りに修正すると
地図な動画バナーがクリックしても立ち上がらなくなって
しまいました。。

なので、知恵をしぼり、
position: relative;
z-index: 1;
で階層の順番付けをしたのですが、この場合は、崩れる現象
のままで解決できませんでした。

解決の糸口とすれば、arexisさんのおっしゃる通り
動画を停止すれば崩れないので、

Play()やStopPlay()を使ってみるのはいかがでしょうか？
ご指導ご鞭撻よろしくお願い致します。

回答No.1

arexis

地図ですか？
表示と同時にフラッシュを止めるかhiddenにすることはできませんか？
多分その程度で良いような気がするのですが・・。

お礼

arexisさん
早速のご意見ありがとうございます！
参考になります。

ただ。。
僕自身、スクリプト関係が得意でなくフラッシュを止めたり
hiddenにする方法がわからないのです。
もしよかったら、もう少し詳しくご説明頂けますか？