続・背景と連動するスライドギャラリープラグイン

2023/08/16 00:01

このQ&Aのポイント

昨日の投稿はこちらです。ご返答頂いた事で解決した様に思えましたが、不具合が見つかりましたので何とか解決策が頂けたらと思います。
不具合としては、作成したページのスライドギャラリーが隠れるくらい下の方へ行くと、スライドショーで画像が切り替わるたびにスライドギャラリーまで自動的に戻ってしまいます。これではかなり問題ありなので、何とか修正をしたいのですが解決策が分かりません。
下記に使用したhtml、css、jQueryを記載します。何かお分かりの方、よろしくお願い致します。

ベストアンサー

続・背景と連動するスライドギャラリープラグイン

2012/03/08 10:19

恐れ入ります。昨日も投稿しましたが、少々不具合が出ましたので再度ご質問させて頂きます。昨日の投稿はこちらです。 http://okwave.jp/qa/q7348102.html ご返答頂いた事で解決した様に思えましたが、不具合が見つかりましたので何とか解決策が頂けたらと思います。不具合としては、作成したページのスライドギャラリーが隠れるくらい下の方へ行くと、スライドショーで画像が切り替わるたびにスライドギャラリーまで自動的に戻ってしまいます。例えば５秒で切り替わるとすると、ページの下の方は５秒間しか見れない状態になってしまいます。これではかなり問題ありなので、何とか修正をしたいのですが解決策が分かりません。下記に使用したhtml、css、jQueryを記載します。何かお分かりの方、よろしくお願い致します。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css">  </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> </head> <body> <div> <div id="slides"> <div class="slide" style="background-color:#776; background-image:url(img/photo01.jpg);"> <div class="caption"><div class="content">コメント1</div></div> </div> <div class="slide" style="background-color:#e84; background-image:url(img/photo02.jpg);"> <div class="caption"><div class="content">コメント2</div></div> </div> <div class="slide" style="background-color:#abb; background-image:url(img/photo03.jpg);"> <div class="caption"><div class="content">コメント3</div></div> </div> </div> </div> <script type="text/javascript">  </script> </body> </html>

gellgugu
お礼率55% (37/67)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2012/03/08 11:56 回答No.1

前回回答者です。どうやら、一時的に要素が表示されないときにレイアウトし直されるようですね。 id="slides"の親要素のサイズを確保しておけばよろしいかと… <div style="height:300px;"> 　<div id="slides"> 　　・・・・・　</div> </div> とればどうでしょうか？あるいは、以下でもいけるかと… $("#slides div.slide").hide().filter(":first-child").show(); var interval = setInterval(function(){ var el = $("#slides div.slide:visible"), elm = el.next(); (elm.length?elm:$("#slides div.slide:first-child")).fadeIn(1000); el.hide(); }, 4000);

質問者

お礼 2012/03/08 14:18

昨日からお世話になっております。早速のご返答ありがとうございます！ <div style="height:300px;"> 　<div id="slides"> 　　・・・・・　</div> </div> こちらの方法で無事に解決しました！とても助かりましたし、良い勉強になりました。本当にありがとうございました！

関連するQ&A

ドラッグによるスライド移動をさせない方法(safari/chrome)
お世話になります。早速ですが質問させていただきます。 jQuery1.3.2とEasySlider1.7プラグインを使っています。 EasySliderを使ったスライドの中にテキストボックスを配置しているのですが、このテキストボックスでドラッグしてスライドの領域外へ移動させると次のスライドへ移動してしまいます。（safari と google chrome のみ）これを移動させないよう固定する方法はありませんでしょうか？以下にソースコードを載せておきます。 ------------------------------------------------------- <html> 　<head> 　　<title>Easy Slider TEST</title> 　　<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js"></script> 　　<script type="text/javascript" src="lib/jquery/easySlider1.7.js"></script> 　　<script type="text/javascript"> 　　　$(document).ready(function(){ 　　　　$("#slider").easySlider(); 　　　}); 　　</script> 　　<style type="text/css"> 　　　#slider{} 　　　#slider ul{ 　　　　list-style-type:none; 　　　　margin:0px; 　　　　padding:0px; 　　　} 　　　#slider ul li{ 　　　　height:100px; 　　　　width:300px; 　　　} 　　</style> 　</head> 　<body> 　　<div id="slider"> 　　　<ul> 　　　　<li><div style="height:100%; background-color:#aaa;"> 　　　　　<input type="text" name="text" value="slide-1" /> 　　　　</div></li> 　　　　<li><div style="height:100%; background-color:#bbb;">slide-2</div></li> 　　　　<li><div style="height:100%; background-color:#ccc;">slide-3</div></li> 　　　</ul> 　　</div> 　</body> </html> ------------------------------------------------------- ■jQuery1.3.2■ http://docs.jquery.com/Release:jQuery_1.3.2 ■EasySlider1.7■ http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider 以上、よろしくお願い致します。
- ベストアンサー
- JavaScript
HTMLで○や■などをテキストの代用とした時
HTMLで○や■などをテキストの代用とした時レイアウトが崩れてしまうのはなぜでしょうか？教えてください。よろしくお願い致します。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>無題ドキュメント</title> <style type="text/css">  </style></head> <body> <div class="container"> <div class="header"> </div> <div class="main"> <p>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</p> </div> <div class="footer"> </div> </div> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
jquery slickに関して教えて下さい。
jquery初学者です。 slickのシングルモードは動作するのですが、センターモードの実装が上手くできないため、対処法を教えて下さい。 ////code//// <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>テスト用</title> <script src="js/jquery-1.11.2.min.js"></script> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript"> $("document").ready(function(){ $('.your-class').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] }); }); </script> </head> <body> <div class="your-class"> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> <div class="test">your content</div> </div> <style> .your-class{ width:350px; margin-left:50px; } .test{ background-color: #00f; } </style> </doby> </html> scriptのファイル等はシングルモードが動作済みであるため、ダウンロード等は済んでいると思われます。よろしくお願い致します。補足参考としたサイトはこちらです。 http://kenwheeler.github.io/slick/ よろしくお願い致します。
- 締切済み
- JavaScript
jquery、javascriptについて
あるdivエリア内をクリックすると、特定のチェックボックスにチェックが入るということをしています。（チェックボックスにチェックを入れるとdiv内の色が変わります。）つまり、divとチェックを連動させたいのです。その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、もっと簡単にまとめる方法はないのでしょうか？さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名であわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。そんなことができるのでしょうか？具体的に教えていただけると幸いです。よろしくお願いいたします。
- ベストアンサー
- JavaScript
borderの箇所をマウスでクリック
cssでborderを指定し ajaxで枠内、枠外では何も動作しないが borderの箇所をマウスでクリックした場合のみ動ささせるにはどのようにすればいいでしょうか。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function () { $("div.button").mousedown(function () { $("div#message").text("マウスのボタンが押されました。"); }) $("div.button").mouseup(function () { $("div#message").text("マウスのボタンがはなされました。"); }) }) </script> <style> .button { border: solid 1px #0094ff; background-color: #e1e1e1; width: 200px; height: 32px; } </style> </head> <body> <div class="button">枠</div> <div id="message"></div> </body> </html>
- ベストアンサー
- AJAX
クリックする度に表示/非表示が切り替わるスクリプト
クリックする度に表示/非表示が切り替わるスクリプト Content1をクリックするとSubContentsの表示/非表示が切り替わるスクリプトを組みたいのですが、下記スクリプトのjavascript内で表示/非表示の実現方法がよくわかりません。調べるとStyleのVisibilityという要素(?)を指定することで表示/非表示が切り替えられる可能なのは分かったのですが、具体的にはどんなプログラムを組めばいいのか分かりません。どなたかご教授お願いします。 <html> <head> <title>Template</title> <style type="text/css"> span.content{ background-color: #FFCC66; width: 100; height: 20; } div.subcontent { position: absolute; top: 40px; left: 40px;} </style> <script language="javascript"> function cont_pop(){ //ここをどうすれば良いでしょうか？ } </script> </head> <body bgcolor=#EEEEEE> <span id="cont1" class="content" onClick="cont_pop()">Content1</span><BR> ↓これを表示/非表示させたい <div class="subcontent" id="scon1"> SubContents </div> </body> </html>
- ベストアンサー
- JavaScript
JavaScript初心者です。URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいです。
JavaScript初心者です。 URLの末尾に含まれる文字列を名前にもつclassのstyleを変更したいんですが。。 URLに含まれる文字列を名前にもつidのスタイル変更については解決したのですが、同様のことclassでもやりたいと考えています。例えばURLの末尾が /index.html?AAA&BBB となっている場合、非表示だったAAAとBBBのdivを表示するということをやりたいです。ソースは以下になります。前半でURLの末尾を取得して、後半でclassのスタイルを書き換えているつもりです。それぞれでは動作するんですが、あわせると動作しません。自分はかなり初心者ですので、根本的な誤りがあるかもしれませんが、ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <style type="text/css">  </style> <script language=javascript>  </script> </head> <body onload=changeStyle();> <div class="AAA">111</div> <div class="AAA">222</div> <div class="AAA">333</div> <div class="BBB">444</div> <div class="BBB">555</div> <div class="CCC">666</div> <div class="CCC">777</div> </body> </html>
- 締切済み
- JavaScript
背景色を指定したのに反映されません。
CSSは外部ファイルに記述しています。画像のように色をつけたいのですが、うまくいきません。上端から150pxです。テキスト・画像を表示しないで背景色のみの表示もできますでしょうか? ・HTML <body>間のみ ※<head>間に<link rel="stylesheet" href="sample.css" type="text/css">の記述はあります。 <body> <div class="color1"><p class>文字など（できれば入れない）</p></div> </body> ・CSS（sample.css） <style type="text/css"> div.color1 { width: 100%; height: 150px; color: black; background-color: blue; } </style> 同じ階層?に両ファイルはあります。
- ベストアンサー
- CSS
スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣）私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。ソースを貼っておくのでよろしくお願いします。ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css">  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript>　jQuery.noConflict();　</SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript>　jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0　});});　</SCRIPT>  <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> </HEAD><BODY><DIV id=slide class=galleryview>  <DIV id=gallery_box>  <DIV class=panel><IMG alt="○○○　src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV>   <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネットリュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL> </DIV> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。困っているので、お願いします。
- 締切済み
- JavaScript
BOXがロールオーバーで開閉するインターフェース
よろしくお願いします。 javascript初心者です。今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて本を買って勉強しているのですがうまく動作しません。。 HTMLはーーーーーーーーーーーーーーーーーーーーーーーーー <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> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。
- ベストアンサー
- JavaScript