JSプラグインでボックススライダーとcarouFredSelを使っているが上手くいかない理由と解決方法を教えてください

2013/05/23 17:11

このQ&Aのポイント

JSプラグインのボックススライダーとcarouFredSelを使って画像のスライドを実現しようとしていますが、後者が上手くいきません。
要素の確認をすると、carouFredSelのスタイルが正しく適用されていないようです。
また、widthを変更するにはHTMLのどこを修正すれば良いのでしょうか。困っています。お願いします。

t-pop-corn-t
お礼率32% (102/311)

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

回答全件

ベストアンサー

こんにちは。プラグインの中で周りの要素なんかから自動的に計算されて…

2013/05/24 08:18

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

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

ベストアンサー

LancerVII
ベストアンサー率51% (1060/2054)

2013/05/24 08:18 回答No.1

こんにちは。プラグインの中で周りの要素なんかから自動的に計算されているようですので、そこを全て解析して調整するしかないと思います。 (すべてを解析していないのでなんで90pxに変更したいかとか汲み取れてませんが) まずはこのwidthが何をしている値であるか、それを90pxに変更することが良いことなのか解析しないとダメだと思います。 <div id="thumbs" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 58px; margin: 0px; width: 2070px; height: 38px; z-index: auto;"> こうなるのは、プラグインの中で自動的にスタイルを追加しているからです。ようは指定されたthumbsという要素にいろいろ手を加えて、動かしているのです。（それがプラグインと呼ばれるもの) jquery.carouFredSel-6.2.1.jsの中に function in_mapCss($elem, props) { } という関数があります。このへんで必要なcssを追加して、その後計算された（または設定された）値をセットしているように見えます。ぱっとしか追っていませんので間違えていたらすみません。まずは何に利用される値なのか、90pxに変更して動くのか、全て解析しないとどこをどのように変更したらよいかは見えてこないと思います。

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

カルーセルスクロールについて教えてください
http://kokusai.ecc.ac.jp/ このサイトの大きい画像の下に小さい画像があります。この小さい画像が自動で動いて、大きい画像もそれと同時に変化しています。この仕組みが知りたくて、調べたらどうやら、carouFredSelというプラグインを使っているとのこと。参考に同じように真似て僕も練習でＨＴＭＬ作ってみました。すると、HTMLでは<div id="thumbs">としか記述していないのに実際アップロードすると下記のように <div id="thumbs" style="text-align: left; float: none; position: absolute; top: 0px; right: auto; bottom: auto; left: 58px; margin: 0px; width: 2070px; height: 38px; z-index: auto;"> スタイル記述が自動生成されています。たとえば、widthが2070になっていますが、HTMLでは記述しておらず自動で記述されているのでどうやって、2070という幅を変更するのかがわかりません。わかりにくい説明になってしまって申し訳ございませんがよろしくお願いします。
- ベストアンサー
- JavaScript
CSS：floatを使っての段組で困っています
図のような段組をしたいのですが、ソースはあっているでしょうか？サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }
- ベストアンサー
- HTML
並んだ２つのfloatボックス、片方を固定位置にしたい
floatでボックスを２つ並べたものの、左側のボックスを、右側のコンテンツ量が増えても、いつでもブラウザの固定された位置の表示させていと考えています。現在、このfloatの２つのボックスは、大きなボックスで囲んでおり、 topから160pxの余白をとっています。また、この大きなボックスは、常にセンターにある状態です。・トップから常に160pxのマージンが欲しい・左側の余白は、ブラウザの大きさに寄ってかわる（センタリングの為）・右のボックスは自由に動く。この状況で、左のメニューだけを固定することは可能でしょうか。教えてください。現在ソースは下記のようにしております。【HTML】 <div id="container"> <div id="gNavi"> 固定したいメニューBox </div> <div id="main"> スクロールするぐらいの長文Box　</div> </div> 【CSS】 * { margin:0 ; padding:0; } body { text-align:center; } #container { width:894px; margin:160px auto 65px auto; } #gNavi { position:fixed; float:left; top:160px; left:auto; width:175px; } #main { float:left; width:716px; margin:0 0 0 2px; text-align:left; overflow:auto; }
- ベストアンサー
- CSS
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい
外側のdivの高さを入れ子のdivの高さに自動的に合わせたい添付画像のようなコンテンツを作成しています。外側のdiv(contents_box）内にcontents_imgとcontents_textのdivを配置しています。このcontents_imgとcontents_textの高さに合わせて外側のcontents_boxも自動的に変動させたいのですが、どのようにしたら良いのでしょう？高さをautoですとただの棒のようになってしまい、ダメでした。どうぞよろしくお願い致します。 xhtml <div id="contents_box"> <div id="contents_img">ここに画像</div> <div id="contents_text"> ここにテキスト</div> </div> css #contents_box { height: auto; width: 805px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #333; } #contents_img { height: auto; width: 300px; margin-top: 10px; margin-right: 10px; margin-bottom: 10px; margin-left: 0px; float: left; } #contents_text { height: auto; width: 485px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 10px; float: right; text-align: justify; }
- ベストアンサー
- HTML
jQuery bxSlider でのアニメーション
jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。１枚目から５枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか？ <script type="text/javascript"> $(function(){ var slider = $('#slider1').bxSlider({ controls: true, duration: 2000, easing: 'easeInOutQuart', onAfterSlide: function(currentSlide){ if(currentSlide==0){ $("#block").fadeIn("slow"); }else{ $("#block").hide(); } if(currentSlide==1){ $("#block2").fadeIn("slow"); }else{ $("#block2").hide(); } if(currentSlide==2){ $("#block3").fadeIn("slow"); }else{ $("#block3").hide(); } if(currentSlide==3){ $("#block4").fadeIn("slow"); }else{ $("#block4").hide(); } if(currentSlide==4){ $("#block5").fadeIn("slow"); }else{ $("#block5").hide(); } } }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); </script> <ul id="slider1"> <li class="slider1-1"> <div id="block" style="background-color: red; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-2"> <div id="block2" style="background-color: white; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-3"> <div id="block3" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-4"> <div id="block4" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-5"> <div id="block5" style="background-color: black; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> <li class="slider1-6"> <div id="block6" style="background-color: #FFF; width: 500px; height: 300px; position: absolute; top: 70px; left:100px;"> </div> </li> </ul> <div class="thumbs"> <a href=""><img src="img/1.jpg" width="50" height="50" /></a> <a href=""><img src="img/2.jpg" width="50" height="50" /></a> <a href=""><img src="img/3.jpg" width="50" height="50" /></a> <a href=""><img src="img/4.jpg" width="50" height="50" /></a> <a href=""><img src="img/5.jpg" width="50" height="50" /></a> <a href=""><img src="img/6.jpg" width="50" height="50" /></a> </div>
- ベストアンサー
- JavaScript
CSSでボックスのheightが0になる
http://css-happylife.com/ 上のサイト(私のサイトではないです)で、 <div id="contentsInner"> <div id="main"> </div> <div id="sub"> </div> </div> という部分があります。 CSSはだいたい下のような感じです。 #contentsInner { margin:0pt auto; position:relative; width:910px; } #main { float:left; overflow:hidden; width:500px; } #sub { float:right; margin-top:20px; padding:8px 0pt 8px 10px; width:390px; } Firebugで確認したところ、 #mainの大きさは500 x 1552 #subの大きさは390 x 1305 に対し、 #contentsInnerの大きさは910 x 0 と、高さが0になっています。もちろん、#contentsInnnerに背景画像を設定しても表示されることはありません。ブラウザもheight=0と認識しているようです。なぜ高さが0になってしまっているのでしょうか。このバグ？の対策を教えてください。よろしくお願いします。
- ベストアンサー
- CSS
HP作成で背景画像が表示されないです・・
いつもお世話になっております。今回は、HP作成のことでご指導いただきたく投稿致しました。説明が上手くできていないと思いますが宜しくお願い致します。参考書片手にCSSにトライしていますが一部、背景画像が表示できず困っています。ネットで調べていますと「float」を使っている場合について対処法が色々掲載されているのですが何か間違っているようで、どれを試しても背景画像を表示することができません。下記にhtmlとｃｓｓを簡単に貼り付けました。説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。－　html　－ <body> <div id="container"> <div id="header">　　→背景画像表示されます。　<p>＊＊＊＊＊</p> 　</div> <div id="box"> <div id="left">　　→背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right">　→背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> －　ｃｓｓ　－ #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
ボーダースタイルがうまく表示できない
#content { width:525px; } div.box { width:525px; margin-top: 20px; border-bottom:dotted 1px #ccc; } div.left { width:140px; float: left; font-weight: bold; margin-left: 5px; } div.right { width:380px; float: left; line-height: 20px; height: 20px; } <div　id="content"> <div class="box"> <div class="left">Address</div> <div class="right">住所<br>東京都</div> </div> </div> クラス名boxというボックスのボトムにボーダー指定をしましたが、ボックスのズレ？によりボーダーがトップになっているように見えてしまいます。どこが間違っておりますか？アドバイスを宜しくお願いします。
- ベストアンサー
- HTML
firefoxで見るとdiv背景画像がスクロールで消えてしまいます
http://www.geocities.jp/testac2007/ bodyに「top_bg.gif」という背景画像指定をした上で更にdivを重ね、そのdiv内に「side_860.gif」という背景画像を指定しています。 ieだと意図した通りに表示されるのですが、 FirefoxやNetscapeで確認すると、表示されているページより下部のスクロール以下の背景画像が表示されません。何とか同症状についてネットで検索し試行錯誤してみたのですが、解決に至りませんでしたのでこちらでヘルプさせていただきました。皆さんのお知恵を拝借いただきたいです。 ■■■HTMLの概要■■■ <body> <div id="side_bg"> <div id="outline"> <div id="A01">○○○</div> <div id="A02"> <div class="A02_left">○○○</div> <div class="A02_right">○○○</div> <br class="c-both"> </div> <div id="B01">○○○</div> </div> </div> </body> ■■■CSSの概要■■■ body { margin:0px auto; background-image:url(images/top_bg.gif); } #side_bg { width:860px; height:100%; margin:0 auto; background:#ffffff url(images/side_860.gif); overflow:visible; } #outline { width:830px; margin:0 auto; background-color:#FFFFFF; } .c-both { clear:both;} #A01{ width:830px; margin:15px 0px 4px 0px; overflow: auto; } #A02{ width:830px; margin:0px 0px 4px 0px; overflow: auto; } .A02_left{ width:304px; float:left; } .A02_right{ width:526px; float:right; margin-top:4px; } #B01{ width:730px; margin:20px 50px; }
- ベストアンサー
- CSS
FireFoxで見るとdiv間に隙間が・・・
divを３つ使い、CSSで指定した背景画像によって一つのボックスを作っています。ＩＥ６で見たときは異常ないのですが、FireFoxで見ると、それぞれ隙間が開いてしまい、背景画像が途切れて見えます。同じような使い方をしている箇所にすべて同じ事が起きています。 Firefoxではマージン0の状態でdivの間に隙間が出来てしまうのでしょうか？直す方法があればご指導よろしくお願い致します＞＜ <div id="medi-top"> </div> <div id="media"> <p>何行かにわたり、画像や文章が入力されています</p> </div> <div id="medi-bottom"></div> #medi-top { background-image: url(img/media_01.jpg); background-repeat: no-repeat; height: 50px; width: 680px; margin-top: auto; margin-right: auto; margin-bottom: 0px; margin-left: auto; line-height: 0; } #media { width: 600px; background-image: url(img/media_03.jpg); background-repeat: repeat-y; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; padding-right: 40px; padding-left: 40px; } #medi-bottom { background-image: url(img/media_05.jpg); background-repeat: no-repeat; height: 35px; width: 680px; margin-top: 0px; margin-right: auto; margin-bottom: 50px; margin-left: auto; } 本や検索などで同じようなものを探して対処してみたのですが、直らなかったため質問させていただきます。よろしくお願い致します。
- ベストアンサー
- CSS