• ベストアンサー

スライダーの調整

http://coco.boy.jp/ 上記のサイトのスライダーを画像が真ん中にピッタリとまる ようにしたい、両端の影が均等の幅になるようにしたのですが、 どうもうまくいきません。 javascript をちょうせいしなければならないのでしょうか？ http://coco.boy.jp/js/slider.js 既にCSSはいろいろ試してみましたが、変わりません。 http://coco.boy.jp/css/slider.css 例えば、 #slider10 .layerの left: 0;　をいくらにしようと変わりません。 ご存知の方教えてください。

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

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

ご使用のものはライブラリというわけではなさそうなので、作者にお尋ねになるのが一番よさそうですが… 表示位置の計算は 　function resize(){　～～　} で行っています。 考え方はほぼそのままでよさそうですが、通常なら親要素（div#slider10）のサイズを基に位置を計算すべきところをwindowサイズから計算しているようです。 親要素をウィンドウ幅いっぱいに定義している場合は、結果的にほぼ同様になりますが、divのmargin、paddingの分だけ計算がずれることになりそうです。 ご質問のずれの原因は、デフォルトのpaddingにあると思われます。 ＣＳＳの最初で、marigin、padding等をクリアしておくことで、中央に表示されるのではないでしょうか。 また、layer（左右の薄墨半透明の部分）の幅は、計算では画像と同サイズと想定されていると想像できますが、ご提示のサンプルでは画像の幅が970pxに対してlayerの幅が1000pxになっているので、上記の修正をしてもその差分のずれが残ることになると思います。

kurobon619
質問者

お礼

fujillinさん ＣＳＳの最初で、marigin、padding等をクリアしておくことで、 解決しました。　ありがとうございます。

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

関連するQ&A

  • Photo Sliderの画像にリンクを張りたい。

    Photo Sliderの画像にリンクを張りたい。 元はリンクが張っていないのですが、出てくる写真をクリックしたら飛ぶようにしたいです。 【htmlソース】 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <link rel="stylesheet" type="text/css" media="screen" href="photoslider.css" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="photoslider.js"></script> <title>Photo Slider Tutorialより</title> </head> <body> <div><a href="http://opiefoto.com/articles/photoslider" target="_blank">Photo Slider Tutorial</a>より必要部分を抜き出したもの</div> <h2>必要なもの</h2> <p> <ul> <li><a href="jquery.js" target="_blank">jquery.js</a></li> <li><a href="photoslider.js">photoslider.js</a></li> <li><a href="photoslider.css">photoslider.css</a></li> </ul> </p> <div class="photoslider" id="default"></div> <div class="canvas"> <script type="text/javascript"> $(document).ready(function(){ //change the 'baseURL' to reflect the host and or path to your images FOTO.Slider.baseURL = 'http://ryouchi.up.seesaa.net/photoslider/'; //set images by filling our bucket directly FOTO.Slider.bucket = { 'default': { 0: {'thumb': 't_0.jpg', 'main': '0.jpg', 'caption': 'Opie'}, 1: {'thumb': 't_1.jpg', 'main': '1.jpg'}, 2: {'thumb': 't_2.jpg', 'main': '2.jpg', 'caption': 'Trash the Dress'}, 3: {'thumb': 't_3.jpg', 'main': '3.jpg'} } }; //or set our images by the bucket importer var ids = new Array(0,1,2,3); FOTO.Slider.importBucketFromIds('default',ids); }); </script> <script type="text/javascript"> $(document).ready(function(){ var ids = new Array(0,1,2,3); FOTO.Slider.importBucketFromIds('default',ids); FOTO.Slider.reload('default'); FOTO.Slider.preloadImages('default'); FOTO.Slider.enableSlideshow('default'); }); </script> </div> </body> </html> 【ページURL】 http://ryouchi.up.seesaa.net/photoslider/index.html html以外のjsとcssは上記URLから閲覧できます。 調べましたがどうしても分からなくて非常に困っております。 どうかご教授ください。 よろしくお願いいたします。

  • jQuery slider2のページアイコン

    小生、ウェブサイト制作経験はアリながらもJavascriptに関しては全くの素人です。 既成のJavascriptプログラムの中でスライドショー向けのｊQuery slider2をダウンロードし、 ウェブサイトに適応してみました。 概ね思った通りに作動するものの、スライダー部分の右下に表示されページアイコン（class="jquery-slider-page"として作成されている部分？）が、現在表示している部分に相当するアイコンをクリックすると、現在表示している画像を進行方向に流してしまい、背景が表示されるようになっています。 なおかつ、背景が表示された状態でもう一度同じアイコンをクリックすると、消えているはずの現在ページが一瞬表示されるものの、すぐに進行方向へ流してしまうというおかしな動作をします。 もともと期待されていた動作ではないと思うのですが、ダウンロードしてきたものをそのまま使ってこのような動作になってしまっていました。 不得手ながら中身を読み取ってみたところ、現在表示しているページのページアイコンをclass="jquery-slider-page"からclass="jquery-slider-page-current"に書き換えることで、アイコンの表示を変更しているようなので、一時的にclass="jquery-slider-page-current"のクリックを不可にすれば解決するのかなとは思うのですが、何かよい方法はないでしょうか。 使用しているjsは下記のとおりです。 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js jquery.slider.min.js（http://wex.im/javascript/jquery-slider2にて公開されているファイルをダウンロードして使用） また、専用のCSSも特に書き換えなどせずに読み込ませて使用しています。 他にもjs併用はしていますが、紹介サイトでも同様の動作をしていたので、他のjsによる干渉などではない様です。 よろしくお願いします。

  • jquery スライダーが動かない

    昨日質問をしてなんとかクリアしたのですが、次はスライダーが動かなくて困っています。 問題のサイト：http://snapkidz.biz/wp/ 先日の質問：http://okwave.jp/qa/q7180952.html 教えて頂いたのを元に構築をしてメイン画像部分をスライダーにしようと思い構築したのですがうまくいきませんでした。 <!-- External files --> <link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>"> <!-- Favicon, Thumbnail image --> <link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/images/favicon.ico"> <?php wp_head(); ?> <!-- ======================================= スライダーテスト ======================================= --> <script type="text/javascript" src="http://snapkidz.biz/slider1/script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" media="screen" href="http://snapkidz.biz/slider1/style.css" /> </head> <body> <div id="page"> <div id="wrapper"> <div class="header" id="Top"> <h1><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.jpg" alt="Art・・"></h1> <div class="nav"> <ul> <li class="nav1"><a href=""></a></li> <li class="nav2"><a href=""></a></li> <li class="nav3"><a href=""></a></li> </ul> </div> <div class="siteImage"> <div id="slider"> <div class="slider-view"> <div class="slider-container"> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image1.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image2.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image3.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image4.jpg" alt="" /></a></div> <div><a href="#"><img src="http://snapkidz.biz/slider1/images/image5.jpg" alt="" /></a></div> </div><!-- // .slider-container --> </div><!-- // .slider-view --> <a href="#" id="slide-prev">&laquo;</a><a href="#" id="slide-next">&raquo;</a> </div> <p><img src="http://snapkidz.biz/wp/wp-content/uploads/2011/12/blk_03.png" alt="" class="top" /></p> </div> でcssが html,body{margin:0;padding:0;} #wrapper{width:980px;margin:0 auto;position:relative;} div.header{border:sold 1px solid;} div.header h1{position:absolute;top:0;left:0;} div.header div.nav ul,div.header div.nav ul li{list-style:none;margin:0;padding:0;} div.header div.nav ul{display:block;height:70px;width:242px;text-align:right;background:url(http://snapkidz.biz/wp/wp-content/uploads/2011/12/blacknav.jpg);background-repeat:no-repeat;position:relative;left:737px;top:40px;} div.header div.nav ul li{display:inline;width:85px;} div.header div.siteImage{position:relative;width:100%;min-width:640px;} div.header div.siteImage img.top{position:absolute;top:-80px;left:400px;} です。 スライダーダウンロード元：http://unformedbuilding.com/articles/jquery-simple-loop-slider/ head部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか？ 宜しくお願い致します。

  • スライダーの向きを変える

    以下はスライダーのスクリプトです。この状態だとスライダーの画像は右から左に 流れています。これを左から右に方向を変えたいと思うのですが、javascriptは よくわからないので、それらしきところをleftと書いてあるところをrightにかえたりしたのですが うまくいきません。どこを修正すればいいのでしょうか？ //A-yo. ;) $(function(){ $(function(){ // options var options = { duration: 400, easing: 'easeOutCubic', auto: true, interval: 3000 }; // doms var $window = $(window), $container = $('#slider10'), $element = $container.find('ul'), $list = $element.find('li'), $next = $container.find('#next'), $prev = $container.find('#prev'), shift = 2, lw = $list.width(), len = $list.length, timer = ''; var $header = $('#header'), $headerAfter = $header.next(), headerY = $header.height(), containerY = $container.height(); function initialize(){ setup(); $window.on('resize', resize); $next.on('click', function(){ slide(true); }); $prev.on('click', function(){ slide(false); }); $window.on('scroll', scroll); load(); if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; function setup(){ for(var i = shift; i > 0; i--) $element.find('li').eq(len - i).remove().prependTo($element); // div.layerを2つ追加する。 for(var i = 0; i < 2; i++) $('<div class="layer"></div>').insertAfter($element); // 上で追加したdivを変数に入れる $leftlayer = $container.find('.layer').eq(0); $rightlayer = $container.find('.layer').eq(1); // resize関数を呼ぶ resize(); }; function resize(){ var _val = ($window.width() - lw) / 2 - lw * shift; $element.css({ 'width': lw * len, 'left': _val }); $leftlayer.css('left', _val + lw); $rightlayer.css('left', _val + lw * 3); }; // アニメーションを管理する関数 function slide(direction){ // $elementがアニメーション中なら、処理しない if($element.filter(':animated').length) return; // ループを停止 if(options.auto) clearInterval(timer); // 移動を変数に入れる。引数がtrueなら-lw,falseならlw val = (direction)? -lw: lw; // アニメーションスタート。最後にコールバック関数を呼び出す。 $element.animate({ 'marginLeft': val }, options.duration, options.easing, callback); }; // slide関数実行後に呼び出す関数 function callback(){ // valが0より小さければ、最初のliを最後に移動させる。　 // valが0より大きければ、最後のliを最初に移動させる。 (0 > val)? $element.find('li').eq(0).remove().appendTo($element): $element.find('li').eq(len - 1).remove().prependTo($element); // valが0より大きければ、最後のliを最初に移動させる。 $element.css('marginLeft', 0); // options.autoがtrueなら、ループを開始 if(options.auto) timer = setInterval(function(){ slide(true) }, options.interval); }; // ヘッダーを固定する関数 function scroll(){ // スクロール量がcontainerYを上回ったら、関数_fixedを実行 // スクロール量がcontainerYを上回ったら、関数_staticを実行 (containerY <= $window.scrollTop())? _fixed() : _static(); function _fixed(){ $header.css({ 'position': 'fixed', 'top': 0, 'left': 0 }); $headerAfter.css('marginTop', headerY); }; function _static(){ $header.css({ 'position': 'static', 'top': '', 'left': '' }); $headerAfter.css('marginTop', ''); }; }; function load(){ var array = [$element, $next, $prev]; for(var i = 0; i < array.length; i++) array[i].css('visibility', 'visible'); $container.css('background', 'none'); }; $window.on('load', initialize); }); })(jQuery);

  • Ajaxのウィンドウ表示位置について

    ページを開くとAjaxのウインドウが表示されるようになっています。 バックには既にサイトが表示されている状態でその上にウインドウが出てくるイメージです。 ソースは以下のようになっています。 <html> <head> <title>titletitle> <script type="text/javascript" src="js/prototype.js"> </script> <script type="text/javascript" src="js/effects.js"> </script> <script type="text/javascript" src="js/window.js"> </script> <script type="text/javascript" src="js/window_ext.js"> </script> <script type="text/javascript" src="js/debug.js"> </script> <link href="css/default.css" rel="stylesheet" type="text/css"> <link href="css/spread.css" rel="stylesheet" type="text/css"> </head> <body> <script type="text/javascript"> var win = new Window({className: "spread", title: "タイトル", top:50, left:50, width:500, height:500, zIndex: 100, url: "http://www.linkstyle33.com/", showEffectOptions: {duration:3}}) win.show(); </script> --サイトここから-- --サイトここまで-- </body> </html> top:50, left:50,で表示位置を設定することはわかるのですが ウインドウの真ん中に出したいのですがやりかたがわかりません。 試しに50%としてみたもののpx指定になっているようで表示すらされませんでした。 サイトがバックにある状態でウインドウを出したいのでiframe以外で ウインドウを真ん中に表示する方法はあるのでしょうか？

  • 同HTML内で2種のJ-Queryを使用したい

    複数のjQueryを使用し、タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、1つのみしか作動せずJavaScriptエラーがでてしまいます。 片方ずつで行うと作動するのですが、同じHTMLに2種組み込むとうまくいきません。 同じ質問があり参考にさせて頂いたのですが良くわかりません。 複数使う場合の記述方法があるということもサイトで知ってやってみたりしたのですがうまくできませんでした。 http://stacktrace.jp/jquery/with_other_lib.html 使用しているものは以下です。 -------------------------------------------- <!-- jQuery --> <script type="text/javascript" src='/js/J-Query/jquery-1.5.2.min.js'></script> <!-- ナビ --> <script type="text/javascript" src='/js/J-Query/jquery.color-RGBa-patch.js'></script> <script type="text/javascript" src='/js/J-Query/example.js'></script> <!--スライダー--> <script type="text/javascript" src="/js/J-Query/jquery.flexslider.js"></script> <script type="text/javascript"> $(function(){ SyntaxHighlighter.all(); }); $(window).load(function(){ $('.flexslider').flexslider({ animation: "slide", start: function(slider){ $('body').removeClass('loading'); } }); }); </script> <script type="text/javascript" src="/js/J-Query/shCore.js"></script> -------------------------------------------- <!-- ナビ --> グローバルナビで使用 参照元 http://css-tricks.com/examples/MagicLine/ の下の方です。 <!--スライダー--> スライダーで使用 参考元 http://flexslider.woothemes.com/ お手数ですがどなたか教えて頂けると幸いです。

  • jQueryの基本的なことについて教えてください

    自サイトで 「jQuery Slider²」http://wex.im/javascript/jquery-slider2 を設置しようと試みています。 私はhtmlとcssの知識しかありません。 今までずっと、HTML 4.01 Transitionalで、タグ打ちしながらサイトの作成をしていました。 行き詰ったらその都度ネットで調べて…という感じで 10年以上サイト製作をしていますが素人ほどの知識だと思っています。 それで、初めて上のスライドショーを設置しようと色んなサイトを参考にしたのですがうまく動きません。 （google chrome、IE8で見ています） 何が悪いのか…と上記URLの配布サイトを見たところ、 Examples <head> stuff <script type="text/javascript" src="js/jquery.slider.min.js"></script> <link href="css/jquery.slider.css" rel="stylesheet" type="text/css" /> と、2段目がtype="text/css" />という風に閉じてあって、 あぁ、これってページ全体をもうhtmlじゃなくて xhtmlで書かないと動かないって事なのかなぁ、という疑問が沸いてきました。 実際このスライドショーに限らず、jqueryのプラグインを使用している 色んなサイトがxhtml方式になっているのを確認しましたが jQueryのプラグインは、xhtmlでないと動かないものでしょうか？ それとも、このプラグインに限ってはxhtmlなのでしょうか？ よろしくお願いいたします。

  • １トンの物が載っている幅１ｍ長さ２ｍの木台をクレーンを使ってワイヤー２本でうまくつるにはどの位置がいい？

    １トンの物が均等に載っている幅１ｍ、長さ２ｍの木の台があります。 これをクレーンを使ってワイヤー２本で、つるにはどの位置がいいでしょうか？ 両端をつると真ん中の方が下に反ってしまいます。 逆に、真ん中の方をつってしまうと、両端が下に反ってしまいます。 私の考えでは、２ｍを４で割って、両端から５０ｃｍのところをつるといいと思いましたが、それでは両端の方が少し下に反ってしまうんです。 数学的に解決できる式がありますか？ また、長さ２ｍではなく、４ｍの場合はどうでしょうか？

  • 複数のjqueryを入れると動かなくなる

    今サイトを作っているのですが、スライダーと違うjqueryの相性が悪い（？）か自分の記載漏れで、埋め込みをした新しいjqueryは動きますが、スライダーが動かなくなってしまいました。 サイトです：http://blackartcard.com/ ヘッダー内は下記です。 <!--Scroll to Top--> <script src="http://blackartcard.com/backtop/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="http://blackartcard.com/backtop/scrolltopcontrol.js" type="text/javascript"></script> <!-- ======================================= スライダー ======================================= --> <link rel="stylesheet" href="http://blackartcard.com/slider/panning-slideshow.css"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://blackartcard.com/slider/jquery.easing.1.3.js"></script> <script src="http://blackartcard.com/slider/jquery.timer.js"></script> <script src="http://blackartcard.com/slider/image-rotator.js"></script> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript"> $(document).ready(function(){ //マスオーバー時にキャンプション表示 $('.boxgrid.captionfull').hover(function(){ $(".cover", this).stop().animate({top:'135px'},{queue:false,duration:160}); }, function() { $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160}); }); }); </script> </head> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。

  • yahooジオシティーズの広告が酷い

    ジオの無料版を使っています。縦型広告のHTMLがひどすぎます <!-- text below generated by server. PLEASE REMOVE --></object></layer></div></span></style></noscript></table></script></applet> <link href="http://bc.geocities.yahoo.co.jp/js/sq.css" rel="stylesheet" type="text/css"><script language="JavaScript">var jps=382116066;var jpt=1335867415</script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/sq.js"></script><script language="JavaScript" src="http://bc.geocities.yahoo.co.jp/js/geov2.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.geocities.jp/visit.gif?jp1335867415" alt="setstats" border="0" width="1" height="1"></noscript><IMG SRC="http://bc.geocities.yahoo.co.jp/serv?s=382116066&t=1335867415" ALT=1 WIDTH=1 HEIGHT=1> なぜか最初の方に変なタグが入ってるしnoscriptにはｐタグを入れないといけないし、最後の方は大文字だし・・・ なぜこんなに汚いタグなんでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する