js、 jQuery の手直しを助けてください

前へ 次へ
このQ&Aのポイント
  • js, jQuery初心者の方が、背景画像がフェードしながら変わるコードについて手直しをお願いしたいです。
  • 問題1では、Firefox4以外のブラウザでの動作に問題があるようです。問題2では、画像のフェードインが次の画像のフェードアウト後になるため、フェード時に画像が一時的に消えてしまうという問題があります。
  • これらの問題への解決方法をご教示いただける方がいらっしゃいましたら、お知らせください。
回答を見る
  • ベストアンサー

js、 jQuery の手直しを助けてください

js, jQuery　初心者です。下記のコードの手直しを助けて下さい このコードはページ内の複数設置されたリンクのいずれかをクリックすると 背景の画像がフェードしながら変わるというものです。 例えばリンク１を押すと背景画像１がフェードしながら呼び込まれ、 リンク２を押すと背景画像２が呼び込まれるといった感じです。 このソースコードを使うに当たって問題が２つあり、 初心者の自分では手直しできないため こちらに質問させていただきました。 問題１，Firefox 4 では作動するのに、他のブラウザではうごかない。 テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5 問題２、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。 これだとフェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまうので 出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。 どなたか問題解決の手直し方法をわかる方がいらっしゃいましたら ぜひ教えてください [code] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <style type="text/css"> #wrapper { width: 100%; height:100%; background-image:url(img/img1.jpg); background-repeat:repeat;} #container{ width:1000px; height:1000px;} </style> <script type="text/javascript"> $(function(){ 　$("#nav a").click(function(){ 　　var val = this.rel, layer = $("#wrapper"); 　　layer.fadeOut(500, function(){ 　　　layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500); 　　}); 　}); }); </script> </head> <body> <div id="wrapper"> <div id="container"> <div id="nav"> <a href="#" id="btn1" rel="img1">background1</a> <a href="#" id="btn2" rel="img2">background2</a> <a href="#" id="btn3" rel="img3">background3</a> </div> </div> </div> </body> </html> [/code]

  • AJAX
  • 回答数5
  • ありがとう数6

質問者が選んだベストアンサー

  • ベストアンサー
  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.4

>大きな背景画像のスイッチなので それだけタイムラグが発生するくらいの大きな画像だと枚数が増えれば増えるほどページの表示速度も遅くなるということだと思います。 >div を重ねたほうがいいのですね divで重ねなくても、No1で書いたように、ページを表示させた時に、1ピクセルにして表示するとか、visibility:hiddenで載せておくとかすれば、予め他の背景画像を読み込ませておけるので、すぐに表示されるようになります。 まあ、乗りかかった船。せっかくだから載せておきます。 いろいろ問題あって時間かかりすぎた＞＜ CSS部 #wrapper { position:relative; width: 100%; height:100%; } #container{ z-index:1; position:relative; width:1000px; height:1000px; } #img1{ position:absolute; width:100%; height:100%; background-image:url(img1.jpg); background-repeat:repeat; } JavaScript部 var thisbg = "img1"; $(function(){ $("#nav").find("a").each(function(){ if(this.rel == thisbg){return true;} $('<div />', { id: this.rel, css: { "position": 'absolute', "top": "0", "left": "0", "visibility": "hidden", "width": '100%', "height": '100%', "background-image": 'url('+this.rel+'.jpg)', "background-repeat": 'repeat' } }).appendTo('#wrapper'); }); $("#nav a").click(function(){ var val = this.rel; $("#"+thisbg).fadeOut(500, function(){ thisbg = val; $("#"+val).css({"display":"block","visibility":"visible"}); }); }); }); HTML部 <div id="wrapper"> <div id="img1"></div> <div id="container"> <div id="nav"> <a href="#" id="btn1" rel="img1">background1</a> <a href="#" id="btn2" rel="img2">background2</a> <a href="#" id="btn3" rel="img3">background3</a> </div> </div> 説明 冒頭で書いたように背景画像が多くなればなるほどページ全体の読み込み速度は遅くなります。 デフォルトの背景色以外は効率性も考え、JavaScript部分で読み込ませています。 デフォルトの背景DIVは、レスポンスの為に予め設定しておく必要があります。 指定は、CSS部の #img1{} とHTML部の <div id="img1"></div> の部分です。 <div id="img1"></div> は必ずwrapper下に入れておいて下さい。 あとの必要なDIVは、JSが <div id="nav"></div> の中に入っているa要素を調べて書き出してくれるので、設定は <div id="nav"></div> の中にAタグを入れるだけです。 いくらでも増やせます。 z-indexで切り替えということでしたが、fadeOutにしたら不可視になるので、手間は同じだし、背景画像でもし透過画像（jpgなのでないでしょうが）を使われたりしたらおかしなことになると思うので、z-indexでの切り替えはしていません。 検証 IE7,IE8,FireFox,Safari,Opera,クローム #IE6は背景が縮まったままになります。解消できなかった＞＜ では！

suteadd_1
質問者

補足

再度の御返答ありがとうございます >まあ、乗りかかった船。せっかくだから載せておきます。 >いろいろ問題あって時間かかりすぎた＞＜ 貴重なお時間を使ってまでコードを作っていただいて本当に、本当にありがとうございます！ ずっとひとりで悩んでいたので助かってます ＦＦ以外のブラウザでも動きましたし、IE6　は別　css/javascript　にし 背景が変わらないようにしたいと思います 図々しいついでに、いただいたコードについて質問してもよろしいでしょうか・・・ もちろんお手数でなければで構いませんし もし数日内に御返答がなければこちらの投稿を持ってベストアンサーとしたいと思っております＾＾ 質問１ >visibility:hiddenで載せておくとかすれば、予め他の背景画像を読み込ませておけるので、 >すぐに表示されるようになります。 背景画像その１の "img1.jpg" はcss内で読み込まれていることは分かるのですが javascript　の上部　function　内にある　css　のプロパティ、 "visibility": "hidden", これで他の背景画像（img2,img3)もページロード時に隠れて読み込まれているのでしょうか？ それともhtmlに別個で　img2,img3　をどこかに設置し、css　を　visibility:hidden;　にしなければ ページロード時に　img1　の様に読み込まれないのでしょうか 質問２ ＞$('<div />', これはhtml内の <div id="nav"> を javascript で閉じているのでしょうか それとも何か別の事をしているのでしょうか 質問３ ＞$('<div />', 試しに　</ div>　としたところ動きませんでした なぜインラインでクローズ(</ div>　ではなく　<div />）なのでしょうか 先程も供述しましたが、お時間があればで構わないので どうぞよろしくお願いします

その他の回答 (4)

  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.5

>質問１ 質問の回答の前に余談を。 サンプルソースを書く前に display: none visibility: hidden の挙動を検索しました。 ですが、詳しく書いているページが見つからなくて、不可視にした際に、画像を読み込んでくれるのか、読まないのかわかりませんでした。 そこで、ログ出力するPHPを作って、<div>に背景画像として作ったPHPを入れ、display: noneをした時にログ保存されるかどうかを実験しました。 結果、IE8、FireFoxはOKでした。 Operaを試した時に、ログ保存されませんでした。つまり背景画像にアクセスしていない。 ここでdisplay: noneの検証は終了 次に同じようにvisibility: hiddenを検証。 全てのブラウザでログ保存されたことから、visibility: hiddenの場合は不可視にしても中身を読み込んでいることが確認できました。 だから、今回は、display: noneではなく、visibility: hiddenを使っています。 質問１を解決する前に質問２をまず答えます。 >質問２ $("#nav").find("a").each(function(){ で<div id="nav"></div>内にあるAタグを抽出し、それらのAタグをfunction(){}に入れて（ループして）います。 if(this.rel == thisbg){return true;} は、デフォルトのIDだったらすでに指定されているので処理をしないで次に回しています。 $('<div />', { からの記載は、まず、'<div />'で空要素のDIVを生成しています。 と同時にIDやCSSを付与し、#wrapperの中に放り込む作業をしています。 つまり、手作業でHTMLに書き出したことをJavaScriptでやらせているわけです。 背景画像変えたくなったら<a>タグだけ追加とか変えるとかすればいいので便利でしょ＾＾ >質問３ ブログとかで<br />とかってしているの見たことないです？ <img （省略） />とか。 HTMLは詳しくないので、自信ないですが、タグは開始されたら閉じるものですよね。 それを同時にするのが />かと＾＾ つまり、<div></div> と同じ役割というところですね。 開始されてないのに、</div>にしたらおかしいでしょ。 >再び質問１ 質問２と質問３の項目でimg1と同じようにimg2,img3も生成されたことはわかりましたね？ $(function(){ 省略 }); の処理が終わった時点で、#wrapper下には <div id="img1"></div> とともに <div id="img2"></div> <div id="img3"></div> が自動で生成されているわけです。 だから、img1のようにimg2とかimg3を手作業で設定する必要はありません。 通常のタグをHTMLとして書き出した時に、visibility: hiddenとしても、要素内を取得してくれるわけですから、新たに要素を追加した場合でも設定されている背景画像は読み込まれる（と思います） ここまでは検証してないですが＾＾； まあ、背景画像切り替え時にタイムラグがあるとしたら読み込んでない可能性があるので、言って下さい。 もう一度検証してみますので。 うまく読み込んでいるとは思うんですけどね。

suteadd_1
質問者

お礼

再度の御返答ありがとうございます >サンプルソースを書く前に >display: none >visibility: hidden >の挙動を検索しました。 私の拙い質問に　PHP まで使用して検証していただいて本当にありがとうございました いただいたコードの説明もとてもわかり易く、どんなことをしているのか理解できました；； >つまり、<div></div> >と同じ役割というところですね。 div も　img と同じように単独タグとしてスペースとスラッシュで閉じられるのですね 知らなかった・・大変勉強になります >まあ、背景画像切り替え時にタイムラグがあるとしたら読み込んでない可能性があるので、言って下さい。 試しに背景画像をありえないくらい重くして試してみたところ ページロードに時間がかかり、その後の背景切り替え時のラグはまったくありませんでした きちんと全ての画像を最初に読み込んでくれたようです（やたー！） 万が一のため、ページにプリローダーを設置してナローバンドユーザーにも対応させたいと思ってます 本当に、本当に、ありがとうございました　m(_ _)m

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.3

画像が大きいのでしょうか、読込みに時間がかかるのが原因かと想像されます。 バックグラウンドの背景を切り替える方式だと、切り替えてから読込みが始まるのでご質問のようなことが起こる可能性はあります。 これをできるだけ避けるためには、最初に必要な数だけそれぞれの背景のdivなどを用意しておいて、重ねて表示しておくなどとして、切り替えるときは背景を変えるのではなく、そのdivの重なり順を変更することで背景を切り替えたように見せればよいのではないでしょうか。 ページロード時に各背景の読込みが終了すれば、それ以後はスムーズに切り替えられるはずと思います。

suteadd_1
質問者

お礼

御返答ありがとうございます ＞これをできるだけ避けるためには、最初に必要な数だけそれぞれの背景のdivなどを用意しておいて、 ＞重ねて表示しておくなどとして、切り替えるときは背景を変えるのではなく、 ＞そのdivの重なり順を変更することで背景を切り替えたように見せればよいのではないでしょうか。 おっしゃるとおり非常に大きな背景画像のスイッチなので div を重ねたほうがいいのですね ただその場合恥ずかしいことにスクリプトの方が初心者なので自分ではコードを作れません もしお手数でなければサンプルコードをいただけないでしょうか お時間があればで構わないので、よろしくお願いいたします

  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.2

>あくまで任意の透過度になるまでは次の画像を読み込んでくれません・・ まあ、そういう設定ですしね。 >素人考えですが、function　をふたつにわけて、ひとつは次画像を読み込み、 >同時にもうひとつはフェイドアウト、というような形にできないでしょうか 今の状態なら無理だと思いますよ。 ひとつしか指定できないもの(背景画像)を、２つにすることはできません。 やるとするなら、 #wrapper の上の階層にもうひとつDIVを作り、 そこで新たな背景画像を挿入するくらいですかね。 流れとしては、 1.上の階層の新背景画像を挿入。 2.wrapperのフェードアウトを開始。 3.wrapperのフェードアウトが終了。 4.wrapperに新背景画像を挿入し、可視とする 5.上の階層の背景画像を削除 <script type="text/javascript"><!-- $(function(){ $("#nav a").click(function(){ var val = this.rel; $("#tempwrapper").css("background-image","url(img/"+val+".jpg)"); $("#wrapper").fadeOut(500, function(){ $("#wrapper").css({"background-image":"url(img/"+val+".jpg)","display":"block"}); $("#tempwrapper").css("background-image",""); }); }); }); --></script> <div id="tempwrapper"> <div id="wrapper"> 　（省略） </div> </div> >firefox 以外のブラウザではスクリプトを読んでくれません 完全に同じではないですが、私の環境ではFF以外でも動いています。 IE8、IE7、IE6、Opera、クローム、Safariで検証済み

suteadd_1
質問者

お礼

御返答ありがとうございます 頂いたコードで試したところ完璧に動作しました なにより他ブラウザでも動きました（前のはどうして動かなかったのか謎ですが・・） ブラウザのコンパタビリティーテストも含め 本当にありがとうございました！

  • mikemike7
  • ベストアンサー率87% (97/111)
回答No.1

>フェード時に画像が一時期消える（真っ白になってしまう）時間ができてしまう 画像の読み込みは環境によって違いますが、必ず読み込みに時間がかかるので、こういった症状は防げないように思います。 この読み込み対策として、アクションをさせるページで変更させる画像を予め読み込ませておくと良いかもしれません。 さて、本題ですが、上記の読み込み時の画像表示までのタイムラグによる白くなる状態はないという前提として、 今回の質問者さんが抱える問題としては、完全に不可視にしているから問題があるように思います。 設定した透過度にし、新たな画像に切り替え、透過度を元に戻せばうまくいくと思います。 つまり、 layer.fadeOut(500, function(){ layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeIn(500); }); を layer.fadeTo(500,0.3,function(){ layer.css("backgroundImage", "url(img/"+val+".jpg)").fadeTo(500,1); }); とすることで、目的の挙動になるのではないかと思います。 透過度を変えたい場合は、0.3で指定している引数を変更して下さい。

suteadd_1
質問者

お礼

ご返答ありがとうございます 頂いたコードではやはりフェイドアウトとフェイドインが同時ではないため あくまで任意の透過度になるまでは次の画像を読み込んでくれません・・ 素人考えですが、function　をふたつにわけて、ひとつは次画像を読み込み、 同時にもうひとつはフェイドアウト、というような形にできないでしょうか あとなぜかfirefox 以外のブラウザではスクリプトを読んでくれません <script>タグ内の内容が悪いのでしょうか？ 理由を御存知でしたらぜひ教えてください よろしくお願いします

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. AJAX

関連するQ&A

  • jQueryについて

    jQueryのクロスフェードとlightboxを同一ページに設定しています。 よく分かっていないのに、コピペで作っていますが、 クロスフェードをするとlightboxが動作しません。 設定をどう変更したら出来るようになりますか？ どなたか助けてください。 <link rel="stylesheet" type="text/css" href="cssjs/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="cssjs/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="cssjs/jquery.lightbox-0.5.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="cssjs/target.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#rightimg'; var fadeSpeed = 1500; var switchDelay = 5000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> <title>あかさたな</title> </head> <body> <div id="outer"><!--outer　START--> <div id="container"> <div id="header"><!--header　START--> <h1>いろはにほへと</h1> </div><!--header　END--> <div id="menu"><!--menu　START--> <ul id="bar"> <li><a href="index.html">HOME</a></li> <li><a href="ka.html">ABC</a></li> <li><a href="history.html">DEF</a></li> <li><a href="kaga.html">GHJ</a></li> <li><a href="admission.html">KLM</a></li> <li id="sen"><a href="link.html">りんく</a></li> </ul> </div><!--menu　END--> <div class="don"></div> <div id="eyecatch"> <div id="leftimg"></div> <div id="rightimg"> <img src="images/1.jpg" width="300" height="300" alt="" /> <img src="images/2.jpg" width="300" height="300" alt="" /> <img src="images/3.jpg" width="300" height="300" alt="" /> <img src="images/4.jpg" width="300" height="300" alt="" /> </div> </div> <div id="contents"><!--contents　START--> <h2>最新ニュース</h2> <h3>あかさたな</h3> <div id="gallery"> <ul> <li><a href="top/3.jpg" title="かきくけこ"><img src="top/3s.jpg" width="193" height="272" alt="かきくけこ" /></a></li> <li><a href="top/1.jpg" title="あいうえお"><img src="top/1s.jpg" width="182" height="272" alt="あいうえお" /></a></li> <li><a href="top/2.jpg" title="あいうえお"><img src="top/2s.jpg" width="182" height="272" alt="あいうえお" /></a></li> </ul> </div>

  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<script type="text/javascript">～</script>　をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • jQuery Cycle Plugin のナビ

    img01.jpg～03.jpgをフェードインフェードアウトで繰り返し表示しているのですが ここに手動追加？でナビゲーションを付けたいです。 #navi　部分のbutton02.jpg　にマウスオーバーで　img02.jpgを button03.jpg　にマウスオーバーで　img03.jpgを フェードイン。 マウスアウトでフェードアウトさせて、そこからまた自動でローテーション。 という事をやりたいのですが、自力ではできませんでした。 ご教授の程、よろしくお願いいたします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('div#main').cycle({ fx:'fade', speed:500, timeout:4000 }); }); </script> <div id="main"> <img src="img/img01.jpg" /> <img src="img/img02.jpg" /> <img src="img/img03.jpg" /> </div> <div id="navi"> <ul> <li><a href="#"><img src="img/button02.jpg" /></a></li> <li><a href="#"><img src="img/button03.jpg" /></a></li> </ul> </div>

  • Jqueryスライドが動きません。教えてください

    WEB制作の素人です。 皆さんが簡単といわれている「FlexSlider2」ですが、画像は出たもののスライドにならず、 登録した画像がそのまま出てしまいます。 一度見ていただけますでしょうか？（ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slider"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします

  • Jqueryスライダーが動きません。

    WEB制作の素人です。 簡単といわれている「FlexSlider2」ですが、私がやったところ、 画像は出たもののスライドにならず、そのまま上下に出てしまいます。 一度見ていただき、間違えを教えていただけますか？ （ちなみにスムーススクロールは動きます） <!-- TemplateEndEditable --> <link href="../common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="../js/smoothScroll.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="../js/jquery.flexslider-min.js"></script> $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", pauseOnAction: false, slideshowSpeed: 3000 }); }); </script> <!-- TemplateBeginEditable name="head" --> <!-- TemplateEndEditable --> <!-- TemplateParam name="id" type="text" value="index_page" --> </head> <body id="@@(id)@@"> <div id="wrapper"> <!---ヘッダー---> <div id="header"> <h1><a href="../index.html"><img src="../image/title.gif" width="477" height="79" alt="title"/></a></h1> </div> <p><img src="../image/ribon.jpg" width="800" height="40" alt="Topライン"/></p> <!---トップ画像---> <div id="main_visual"> <div class="flexslider"> <ul class="slides"> <li><h2><img src="../image/slide_image/01.jpg" width="400" height="300" alt="Top画像"/></h2></li> <li><img src="../image/slide_image/02.jpg" width="400" height="300" alt="Top画像"/></li> </ul> </div> </div> よろしくお願いします。

  • jQuery.lightpop.jsの動作について

    jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか？？ ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>

  • jQueryで4枚の画像がフェードアウトで切り替え

    4枚の画像をフェードアウトで切り替えるものをjQueryのサイトを参考に作成しました。 そこで、その右側に4つのボタンのようなものを配置し、 1枚目の画像が表示されているときは1つめのボタンが 2枚目の画像が表示されているときには2つめのボタンが 選択されたような状態になり、 「現在表示されている画像はこのボタンのものです」というようなものを実行したいです。 途中まで、作業は進んでおり、 ■javaScript <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var setImg = '#contentsleft'; var fadeSpeed = 1500; var switchDelay = 4000; $(setImg).children('img').css({opacity:'0'}); $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); setInterval(function(){ $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); },switchDelay); }); ■HTML <div id="contentsleft"> <img src="./imgs/aaa01.jpg" alt="ホーム"> <img src="./imgs/bbb02.jpg" alt="ホーム"> <img src="./imgs/ccc03.jpg" alt="ホーム"> <img src="./imgs/ddd04.jpg" alt="ホーム"> </div> <button id="btn01">１</button> <button id="btn02">２</button> <button id="btn03">３</button> <button id="btn04">４</button> となっています。 javaScriptのところで、1枚目が表示されているときに1つめのボタンを選択状態にする。 というような処理を施せばよいのでしょうが、知識不足でお手上げ状態です。 ご教授いただければと思います。 よろしくお願いします。

  • jQuery LightBox Plugin動かず

    複数の画像をLightBoxで表示したくて http://shanabrian.com/web/library/jlightbox.php#option のページ参考にテストしてみました。紹介されてるダウンロードページからデータを取得し、 解凍後、css、images、jsディレクトリを適用するファイルと同じディレクトリに設置しました。 そしてJavaScriptおよびCSSをhead内にコピーし a要素にrel="lightbox"を追加 これで完了のはずですが、しかし動作しません。 画像のページが開いてしまいます。なぜ動かないのでしょうか？ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>テスト</title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <a href="images/sample1.jpg" rel="lightbox"><img src="photos/image1.jpg" width="200" height="300"></a> <a href="images/sample2.jpg" rel="lightbox"><img src="photos/image2.jpg" width="200" height="300"></a> <a href="images/sample3.jpg" rel="lightbox"><img src="photos/image3.jpg" width="200" height="300"></a> </body> </html> お願いします。

  • 【jquery】スクロールで背景画像もついてくる

    よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html　head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html　body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="contents"> 　～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="haikei"> <div id="contents"> 　～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。

  • jqueryを使ったスクロール画面が正しく作動しません。

    jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>&nbsp;&nbsp;&nbsp;&nbsp; テスト</span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する