- ベストアンサー
画像が表示されない
- 初期状態を非表示にしたメニューのコンテンツ部分の画像が表示されない問題が発生しています。
- jCarouselLiteを使用せずに画像やテキストを配置した場合は正常に動作することが確認されています。
- jCarouselLite2のCSSに問題があるかもしれません。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＃１です。 ついに「jCarouselLite」を導入して直に確かめてみました。（いままでは推測だけで回答していたので・・・）。 やってみると、本当に（失礼！）問題のような現象が出ます。つまり「「可視《VIS()》/不可視《display:none》」を切り替えるjavascriptがうまく動作していない。」ことを確認しました。 これまた推測ですが、問題のスライドショーの「div」のスタイルを関与している「jquery.js」または「jcarousellite_1.0.1.pack.js」の中に「display＝inline（またはblock）」と競合するスクリプトがあり、これを無効化しているのではないでしょうか。 両スクリプトとも一読するには膨大な量があり、中身にどのようなスクリプトが書き込まれているのかまでは追跡しきれませんでしたが。 そこで、他の命令ではどうかと「visibility：visible/hidden」を試しましたが、これもダメ。しかし「透明度」を設定する「alpha」というスタイルはうまくいくようでした。 これが使えれば、ほぼ「display」と同じような動作が可能かと思います。ぜひお試し下さい。 ＜HTML一例＞ <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousellite_1.0.1.js"></script> <script type="text/javascript"> $(function() { $(".anyClass").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible:1}); }); </script> <script type="text/javascript"> function VIS(){ document.all('AAA').style.filter="alpha(opacity=100)"; } </script> </head> <body> 【メニュー】 <br> <a href="javascript:void(0);" onClick="VIS()"> <img src="img/1.jpg" /></a> <br> <br> <br> 【コンテンツ】 <div id="AAA" class="anyClass" style="filter:progid:DXImageTransform.Microsoft.alpha(opacity=0)"> <ul> <li><img src="img/001.jpg"></li> <li><img src="img/002.jpg"></li> <li><img src="img/003.jpg"></li> </ul> </div> </body>
その他の回答 (5)
- pasocom
- ベストアンサー率41% (3584/8637)
＃１です。 そろそろ私の能力の限界が近づいて来たようです(^^)。 問題を整理すれば、やはり「「可視《VIS()》/不可視《display:none》」を切り替えるjavascriptがうまく動作していない。」ということにつきるでしょう。 こういう場合は、HTMLの余計な部分をできるだけそぎ落として問題がどこにあるか追い詰めていくしかなさそうです。 ご提示の「メニュー」部分でのスライドショーを割愛。「コンテンツ」部分も三重のDIVが入れ子になっているのをシンプルにしてみたらいかがでしょう。（この場合、「前後ボタン」がないのでスライドショーは動作しないでしょうが、初期状態に固定で表示されるはずですね）。 また、質問文に「jCarouselLite2のCSS」が出ているところを見ると、いままでご提示あったHTML以外にCSS記述の部分もあるはずですね。これもできるだけ切り落として見て下さい。できれば一切なくしてみたらいかがでしょうか。 一例は下記のように。 <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script> <script type="text/javascript"> $(function() { $(".jCarouselLite").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 6, speed: 300, }); $(".jCarouselLite2").jCarouselLite({ btnNext: ".next2", btnPrev: ".prev2", visible : 1, speed: 300, }); }); </script> <script type="text/javascript"> function VIS(){ document.getElementById("AAA").style.display = 'block'; } </script> </head> <body> 【メニュー】 <br> <a href="javascript:void(0);" onClick="VIS()"> <img src="img/1.jpg" /></a> <br> <br> <br> 【コンテンツ】 <div id="AAA" class="jCarouselLite2" style="display:none;"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div>
補足
もしかして、ケアレスミス過ぎてって話なのかも知れませんね・・・。 極端にシンプルにしてみましたが、 自分で削ってみたパターンも、サンプルで書いて頂いたパターンも、どちらにしろ画像は表示されませんね。 <ul>を消してリストじゃ無くせば表示されるのですが。 style="display:none;を使う場合の document.getElementById("AAA").style.display = 'block'; ここに問題があるということでしょうか・・・。
- pasocom
- ベストアンサー率41% (3584/8637)
＃１です。 ＞置かれているハズの空間が真っ白のままです。両横の<img src="img/left.png" />（もちろんright.pngも？）は表示されています。 というのは ←□□□→ （□部分が空白） という表示状態なのでしょうか。 また、 ＞display:none;で消しさえしなかったら問題なく動きます。 ということは、記述内の「<div id="AAA" style="display:none;">」を「<div id="AAA">」だけにしてしまえば正常表示・動作するということですか？。 （まあこれは最初の質問文にも明記されてはいましたが・・・）。 そうすると、どうもスライドショーに問題があるわけではなく、単に「可視/不可視」を切り替えるjavascriptがうまく動作していないだけって事になるのでしょうか。 （なんだか、ぐるぐる廻って最初の質問にもどってきただけのような・・・）。 試すこととしては、 <div class="jCarouselLite2">→<div id="BBB" class="jCarouselLite2"> とした上で、javascriptの方を function VIS(){ document.getElementById("AAA").style.display = 'inline'; document.getElementById("BBB").style.display = 'inline'; } というようにして、「強制的に(^^)」表示させてみたらいかがでしょう。 また、「display = 'inline'」ではなく「display = 'block'」としたらどうかもお試し下さい。
補足
長いことお付き合い頂きありがとうございます！ 仰る通り、 ←（空白）→ という状態です。 display:noneを消すとここにスライドショーが現れます。 やはりここに焦点が絞られそうですか・・・。 上記の方法を試してみましたが、やはり同じ事になってしまいます。 document.getElementById("AAA").style.display = 'inline'; document.getElementById("BBB").style.display = 'inline'; のそれぞれでblockとinlineもやってみましたが同じですね。 それと、ブラウザもfirefox,IE,chrome、ローカルでもアップしても同じ状態です。
- pasocom
- ベストアンサー率41% (3584/8637)
＃１です。 「jCarouselLite」の記述は一読した限り問題ないような・・・・。 回答２に対する補足に書かれた記述を私の環境で試してみると、確かにスライドショーにはなりませんが、画像はリスト状態で出現します。 （【メニュー】と【コンテンツ】の順序が違っているのは直した上で。）。 私のPCにはスクリプトファイルが入っていないので当然スライドショーにはなりませんが。 「画像が表示されない。」というのは、単なる静止画像さえも表示しないのでしょうか。それともスライドショーにならないという意味でしょうか。 スライドショーにならないということなら、そこで非常に基本的なことを確認するようで申し訳ありませんが、 「<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script> 」 とあるのですから、当然、HTMLのあるパスの同列に「jsフォルダ」が存在し、その中に「jquery.js」と「jcarousellite_1.0.1.pack.js」の二つのスクリプトファイルが入っている、 ということは間違いないですか？。
補足
ありがとうございます。 そうですね、静止画像さえも表示されないです。置かれているハズの空間が真っ白のままです。 両横の<img src="img/left.png" />は表示されています。 画像はjCarouselLite2の要素の外に置くと表示されますので、リンクミスと言うことはなさそうです。 jsファイルは入ってますし、これもdisplay:none;で消しさえしなかったら問題なく動きますので、一応、機能はしてるようです。 pasocomさんの環境では表示されると言うことでしたら、こちらのケアレスミスの可能性が高いのかも知れませんね・・・。
- pasocom
- ベストアンサー率41% (3584/8637)
＃１です。 どうも問題は「CarouselLite2のCSS」ではなく、全体の構成にあるような気がします。 （ご提示の記述は大きさや色を指定しているだけだし。）。 下記のような記述だと、おそらくお望みのような動作かと思いますので確認下さい。 ＜訂正案＞ <style type="text/css"> </style> <script type="text/javascript"> function VIS(){ document.getElementById("AAA").style.display = 'inline'; } </script> <body> 【メニュー部分】 <div class="carousel"> <div class="jCarouselLite"> <ul> <li><a href="javascript:void(0);" onClick="VIS()" /> <img src="img/1.jpg" /></a></li> </ul> </div> </div> 【コンテンツ部分】 <div id="AAA" style="display:none;"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div id="BBB"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div>
補足
続けてありがとうございます。 上記の方法で記述してみました。普通に画像を置いた場合はうまく動作します。しかし、jCarouselLiteのスライドを置くと同じような現象が起こってしまいます(jCarouselLite内の画像だけ表示されない)。 jCarouselLiteが絡むとってところで、その辺りの記述に問題があるのかとも思いますが・・・ <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jcarousellite_1.0.1.pack.js"></script> <script type="text/javascript"> $(function() { $(".jCarouselLite").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible : 6, speed: 300, }); $(".jCarouselLite2").jCarouselLite({ btnNext: ".next2", btnPrev: ".prev2", visible : 1, speed: 300, }); }); </script> <script type="text/javascript"> function VIS(){ document.getElementById("AAA").style.display = 'inline'; } </script> </head> <body> 【コンテンツ】 <div id="AAA" style="display:none;"> <div class="carousel2"> <a href="#" class="prev2"><img src="img/left.png" border="0" /></a> <a href="#" class="next2"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite2"> <ul> <li><img src="img/001.jpg" /></li> <li><img src="img/002.jpg" /></li> <li><img src="img/003.jpg" /></li> </ul> </div> </div> </div> 【メニュー】 <div id="menu"> <div class="carousel"> <a href="#" class="prev"><img src="img/left.png" border="0" /></a> <a href="#" class="next"><img src="img/right.png" border="0" /></a> <div class="jCarouselLite"> <ul> <li><a href="javascript:void(0);" onclick="VIS()" /> <img src="img/1.jpg" /></a></li> <li><img src="img/2.jpg" /></a></li> <li><img src="img/3.jpg" /></li> <li><img src="img/4.jpg" /></li> </ul> </div> </div> </body>
- pasocom
- ベストアンサー率41% (3584/8637)
【メニュー部分】 <li><a href=""onClick="document.getElementById('AAA').style.display = 'inline';" /> ここの「"」の位置はおかしくないでしょうか？ もしかして、 <li><a href="onClick="document.getElementById('AAA').style.display = 'inline';" "/> ？ 的外れでしたらご勘弁。
補足
ご指摘ありがとうございます。 "の位置はおかしいかなと思いつつも、"の位置を変えると動作しなくなります。 こちらの方が正しいのかと思い、 <a href="javascript:void(0);" onmouseover="document.getElementById('AAA').style.display = 'inline'; のように記述を変えても、画像だけが表示されない現象は同じようです。
お礼
なるほど！ 仰るとおりの動きになりました。 上記の方法だとIEのみですが、各ブラウザにあわせられます（・・・よね？）し、ひとまず解決といったところですね。 競合に関しては追求すると大変な事になりそうですので、これで解決とさせて頂きます。 長いことお付き合い頂きありがとうございました。 また何かありましたら是非ともお願いいたします。