2008
04/28
とあるサイトのTOPページにflashを入れたら問題が発生。
ページ内にFlashが同居していると厄介なのである。自分のサイト（ここ）だとそもそもFlashを置いていないから気づきにくい問題なのだが、先日あるサイトを作っていてこのことに気づいた。Flashオブジェクトは z-indexなどの指定を無視し、基本的にドキュメントの最前面にあるように表示されてしまうため、Flashだけは背景に追いやられず、Lightboxで拡大表示させた画像のさらに手前に出てきてしまう。
引用元：web-conte.com
解決方法・・・win・IE
<!-- object要素内に下記を追加 --> <param name="wmode" value="transparent" /> <!-- embed要素に下記の属性を追加 --> wmode="transparent"
でもIEだけ解決したところで困るわけで。
というわけで、safari・FireFoxに対応する場合。
Safari では上記の記述をしてあっても、Flash内にアニメーション描画が発生すると、どうしてもその瞬間だけ（そして描画のあった部分だけが）最前面に出てきてしまい、事情を知らない人が見るとなんだか「バグっている」ような状態になる。これはそういう仕様のようでいかんともしがたい。最終的に辿り着いた別の対策が以下である。これは「lightbox.js」本体にスクリプトを書き足すもので、サムネイルがクリックされた時点で Flash を含む div要素を非表示にする作戦。思いついてみれば初歩的な手だて。そもそも、オリジナルの lightbox.js のなかに同じような手を使ってドキュメント内のselect要素（これもどうしても手前にきてしまう）の表示／非表示を切り替える関数があるので、そこに特定の div を消す（そして、元に戻すために出す）スクリプトを書き足してやればすんなりいく。
引用元：web-conte.com
というわけで、HTMLのFlash表示部分をdivタグで囲みidを付加
<div id="flash"></div>
次にlightboxjsを書き換え
ちなみに参考にさせていただいたサイトでは2.0のみ確認済みとのことだったが、1.0でもちゃんと動作しました。
<!--StartFragment-->function showSelectBoxes(){
selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "visible";
}
document.getElementById("flash").style.visibility = "visible";
}
// ---------------------------------------------------function hideSelectBoxes(){
selects = document.getElementsByTagName("select");
for (i = 0; i != selects.length; i++) {
selects[i].style.visibility = "hidden";
}
document.getElementById("flash").style.visibility = "hidden";
}
末尾近くの該当箇所に赤字のコードを加えてやればOK
これでLightbox動作時にflashが全面にでなくなりますた。
* Theme：ホームページ・ブログ制作 - ジャンル：コンピュータ *
コメント
ありがとうございます。仕事が一つ片付きました。
jquery.lightbox-0.5.jsでもうまくいきました。
jquery.lightbox-0.5.jsでもうまくいきました。
【2011/02/04 14:25】
| ひだか屋 #- | [edit]
コメント
＞ひだか屋さん
コメントありがとうございます。
jquery.lightbox-0.5.jsでも動作したんですね。
ご報告いただきありがとうございました。
お役に立ててよかったです。
コメントありがとうございます。
jquery.lightbox-0.5.jsでも動作したんですね。
ご報告いただきありがとうございました。
お役に立ててよかったです。
【2011/02/16 14:30】
| 青 #mQop/nM. | [edit]
トラックバックurl
http://bluelucky777.blog120.fc2.com/tb.php/8-1a72bc60
| ホームへ |
';}else{crwn='top'.bold();}
function dsptgs(tp,srchtg){
opTgs=''; tc = 0; itc = 0;
for (i in cTgs["name"]){
opTgs+=mnTgs(i,srchtg,tp);
}
opTgs=opTgs.substring(0,(opTgs.length-(intg+'').length))+'
コメント
おかげさまで解決しました。
lightbox.jsの書き換えでうまくいきました。
感謝感謝です。