Javascript(jQuery)のスライドーショーについて

このQ&Aのポイント
  • IE8でのJavascript(jQuery)のスライドショーの動作がおかしくなる問題が発生しています。
  • スライドする領域の幅が正しく表示されず、画像がくっついて表示されてしまいます。
  • Wordpressでの設置も影響している可能性があります。
回答を見る
  • ベストアンサー

Javascript(jQuery)のスライドーショーについて。

Javascript(jQuery)のスライドーショーについて。 HPに下記URLのスライドショーを設置したのですが、FirefoxやGoogleChromeなどでは 思い通りの動きをするのですが、IE8では動作がおかしくなってしまいます。 http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/ Javascriptは全くの無知で上記URLからコピーペーストして必要部分だけ変更して設置したのですが、 スライドする領域が広くなってしまいます。 具体的には元のURLのスライドする領域(画像サイズ)は790pxなのですが当方は620PXにしたいので、 cssで枠自体のwidthを620pxで指定したのですが、枠は620pxでも中身のスライドする部分が 790pxの領域で動いているようで2番目のスライド画像が2つの画像がくっついてでてきます。 [jsファイル] //Set Default State of each portfolio piece $(".paging").show(); $(".paging a:first").addClass("active"); //Get size of images, how many there are, then determin the size of the image reel. var imageWidth = $(".window").width(); var imageSum = $(".image_reel img").size(); var imageReelWidth = imageWidth * imageSum; //Adjust the image reel to its new size $(".image_reel").css({'width' : imageReelWidth}); //Paging + Slider Function rotate = function(){ var triggerID = $active.attr("rel") - 1; //Get number of times to slide var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide [cssファイル] .main_view { float: left; position: relative; } /*--Window/Masking Styles--*/ .window { height:283px; width: 623px; overflow: hidden; /*--Hides anything outside of the set width/height--*/ position: relative; } .image_reel { position: absolute; top: 0; left: 0; width: 623px; } .image_reel img {float: left; width: 623px;} [html] <div class="main_view"> <div class="window"> <div class="image_reel"> <a href="#">画像url></a> <a href="#">画像url></a> <a href="#">画像url></a> </div> </div> <div class="paging"> <a href="#" rel="1">1</a> <a href="#" rel="2">2</a> <a href="#" rel="3">3</a> </div> </div> ソースを抜粋したものは上記になります。 jsファイル部分の「//Adjust the image reel to its new size」 とコメントがあったので、適当に数字をいれたり色々やったのですが、 変わらなかったり、動作しなかったりなってしまいました。 どこに手を加えれば良いのかご教授いただればと思います。 ちなみにWordpressでの設置なのですが、それも関係しているのでしょうか?。 よろしくお願いします。

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

Wordpressでの設置なのですが、それも関係しているのでしょうか?。 =>それは関係ないですね。 この、ライブラリーってゆうか別にライブラリーになってるわけじゃないですが、 ご提示のコードでは、そんな便利な機能は実装してないみたいです。 単に<div class="window">の幅を固定で表示させるimgの幅に一致させ、 var imageReelWidth = imageWidth * imageSum;で <div class="image_reel">の幅をimgの幅×imgの数で、最初に単純計算 するだけで、後は、タイマーで、表示位置を var image_reelPosition = triggerID * imageWidth; で、imageWidth分づつずらすだけです。(ローテーションはさせてますが) よって、各イメージの幅は全て同じで、<div class="window">の幅を イメージ画像の幅+2pxぐらいに固定しないとずれます。 画像じゃなくコンテナーの幅に合わせて、スクロールさせるには、 おお幅にロジック追加改造する必要があるのでは、ないかと... ぐらいに固定しないとずれます。

neatbook
質問者

お礼

お礼が遅れまして申し訳ありません。 ご丁寧にお答えいただき、ありがとうございます。 素人になかなか難しいですが、色々と勉強していきたいと思います。 ありがとうございました。

関連するQ&A

  • 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部分の記載が違うのかと思ったのですが、そうではないようでした・・・ 何が原因なんでしょうか? 宜しくお願い致します。

  • jQuery bxSlider でのアニメーション

    jQueryのbxSlider を使用して、6枚のスライドギャラリー的なものを作っています。 各スライドがスライドした後に、onAfterSlide: function() を使用してオブジェクトのフェードをしたく以下の様に記述しています。1枚目から5枚目では、各スライドをした後にオブジェクトをフェードインでアニメーションができるのですが、最後のスライドのオブジェクトのみがアニメーションしません。コードは以下になります。どなたか最後のオブジェクトもアニメーションするスクリプトを教えていただけますでしょうか? <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>

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

    js, jQuery 初心者です。下記のコードの手直しを助けて下さい このコードはページ内の複数設置されたリンクのいずれかをクリックすると 背景の画像がフェードしながら変わるというものです。 例えばリンク1を押すと背景画像1がフェードしながら呼び込まれ、 リンク2を押すと背景画像2が呼び込まれるといった感じです。 このソースコードを使うに当たって問題が2つあり、 初心者の自分では手直しできないため こちらに質問させていただきました。 問題1,Firefox 4 では作動するのに、他のブラウザではうごかない。 テスト済みブラウザ→ Chrome v.11.0, IE8, Safari 5 問題2、次画像のフェードインが、前画像のアウトの後にならないと読み込みが始まらない。 これだとフェード時に画像が一時期消える(真っ白になってしまう)時間ができてしまうので 出来れば次の画像をフェードなしでストレートに読込み、その上で前の画像をフェードアウトさせたいです。 どなたか問題解決の手直し方法をわかる方がいらっしゃいましたら ぜひ教えてください [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
  • JavaScriptに関する質問です

    ホームページをつくっていますJavaScript超初心者です。どなたか手助けをしていただけますでしょうか?やりたいことというのは、次の通りです。 とあるページがありまして、次のような項目が並んでいます。 <li><a href="#" onClick="window.open('f.html?1,'newWin','width=850,height=650')">テキスト1</a></li> <li><a href="#" onClick="window.open('f.html?2,'newWin','width=850,height=650')">テキスト2</a></li> <li><a href="#" onClick="window.open('f.html?3,'newWin','width=850,height=650')">テキスト3</a></li> それぞれのテキストをクリックすると、新しいウィンドウが表示され、次のJavaScriptが起動します。 function fx(){ var num = location.search.substr(1,1); var the_id1 = "s" + num.toString(); var img = document.getElementById(the_id1).getElementsByTagName("img"); img[0].src = ""←このあたりが特に分かりません。 } 最後に新しいウィンドウページのhtmlを書いておきます。 <div id="s1"><img src="img/s1w.gif" name="s1img"/></div> <div id="s2"><img src="img/s2w.gif" name="s2img"/></div> <div id="s3"><img src="img/s3w.gif" name="s3img"/></div>  このように始めのページの項目をクリックすると、javascript fx が起動してdiv s1 ~s3の画像を取得する(入れ替える)というようにしたいのです。 つまり、最初のページのテキスト1をクリックすればdiv s1の画像を入れ替える、テキスト2をクリックでdiv s2の画像を、という具合にです。  ←このあたりが分かりませんと書いたように、画像を別々に取得する方法が分かりません。 どのように改良すればいいでしょうか?もしくは全く新しいものに変える必要があるでしょうか? 分かる方、どなたか教えてください。よろしくお願いします。

  • jQuery マウスオーバーのたびに処理を繰り返す

    よろしくお願いします。 jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。 別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。(サムネイルには元画像をcssで縮小して表示しています) やりたいことは以下の2つです。 ・Div要素には元画像の大きさで表示させたい。 ・できれば、フェードイン・アウトで画像を切り替えたい。 色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。 お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。 ////スクリプト//// $(function(){ $('#contents li a').click(function(){ return false; }); $('#contents li a').mouseover(function(){ var $title = $(this).children('img').attr('title'); var w = $(this).children('img').width(); var h = $(this).children('img').height(); $('#photo img').attr('src',$(this).attr("href")); $('#photo span').text($title); var mtop = (h/2)*(-1); var mleft = (w/2)*(-1); $('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"}); }); }); ////HTML//// <div id="contents"> <ul> <li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li> <li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li> <li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li> </ul> </div> <div id="photo"> <img src="1.jpg" /> <span>テキストテキスト</span> </div>

  • javascriptの質問です。表示が残ってしまう

    オンマウスでサブメニューを出すjavascriptを組んでいます。 Firefox、Safari、Operaで次の行動を起こすとサブメニューが残ったままになります。 IEだと特に問題は有りませんでした。 OSはXPです。 ・オンマウスでサブメニューが開く ・サブメニューのリンクをクリックし、マウスは動かさずサブメニューが表示されたまま次のページへ ・ブラウザの戻るで元の画面に戻る ・サブメニューが残ったままになっている 原因が分かりません。アドバイスお願いします。 ソース <style type="text/css"> .mainmenu{ visibility : visible; width:200px; position : relative; z-index: auto; } .submenu{ visibility : hidden; width : 200px; top : -10px; left : 100px; position : absolute; background-color:#FFF; padding:10px; border:1px solid #CCCCCC; z-index: 1; line-height:1.5em; } </style> <SCRIPT language="JavaScript"> <!-- function showMenu(ss){ var getStyle = document.getElementById(ss); getStyle.style.visibility = "visible" } function hiddenMenu(tt){ var getsStyle = document.getElementById(tt); getsStyle.style.visibility = "hidden" } //--> </SCRIPT> <div class="mainmenu" onmouseover="showMenu('treeMenu1')" onmouseout="hiddenMenu('treeMenu1')"> <a href="URL1">■ <strong>メインメニュー1</strong></a> <div class="submenu" id="treeMenu1"> <div><a href="URL1-1">サブメニュー1</a></div> <div><a href="URL1-2">サブメニュー2</a></div> <div><a href="URL1-3">サブメニュー3</a></div> </div> </div>

  • jQUery:フェードアニメーションについて

    jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを 参考にしようとしています。皆様のお知恵をお貸しいただければ 幸いです。 http://jsdo.it/TFujinami/8EaB こちらのソースで、フェードアニメーションで メインイメージを変化させたいのですが、 どこを修正すればよいのでしょうか。 $(function(){ var slider_interval = 4000; var slider_now = 0; var slider_max = 0; var slider_mouseover = false; var slider_img_width = $("#slider").width(); var slider_href = new Array(); function sliderScroll(){ slider_now++; if (slider_now > slider_max){ slider_now = 0; } sliderAnimation(slider_now, 'slow'); } function sliderAnimation(index, speed){ $('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){ $('#slider .thumbnail div').removeClass('now'); $('#slider .thumbnail div:eq(' + index + ')').addClass('now'); $('#slider .frame a').attr('href', slider_href[index]); }); } var sliderLoop = function(){ if (! slider_mouseover){ sliderScroll(); } slider_scroll_timer = setTimeout(sliderLoop, slider_interval); } $('#slider .thumbnail div').mouseover(function(ev){ slider_mouseover = true; slider_now = $(this).attr('data-sliderid') - 0; sliderAnimation(slider_now, 'fast'); }); $('#slider .thumbnail div').mouseout(function(ev){ slider_mouseover = false; }); $('#slider .gallery .inner div').each(function(){ $(this).css('margin-left', slider_max * slider_img_width + 'px'); $(this).css({'position':'absolute', 'margin-top':'0px'}); slider_href.push( $(this).find('a').attr('href') ); slider_max++; }); slider_max = 0; $('#slider .thumbnail div').each(function(){ $(this).attr('data-sliderid', slider_max); $(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) ); slider_max++; }); slider_max--; $('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') ); sliderAnimation(0, 'fast'); setTimeout(sliderLoop, slider_interval) }); 本来ならば作者様に質問する事がよいと思うのですが、 より多くの方からお知恵を拝借したいと考え、この場で質問 させていただきました。 何卒よろしくお願いいたします。

  • 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:animate中にイベントを付与

    #box{width:100%;height:100%;position:relative;} #idou{width:3000px;height:100%;position:absolute;} #ugoku{position:absolute;top:-300px;right:-1500px;} a{display:block;width:100px;height:100px;right:0;top:100px;} <div id="box"><div id="idou"><img id="ugoku" src="*.gif" width="300" height="300"><a href="">左に移動</a></div></div> ・jQuery(1.7.1) ・mousewheel.jsを使用、var scrollInt=100;$('html').mousewheel(function(event,mov){$("html,body").css("left","-="+(scrollInt*mov)+"px");});で通常は横移動するソース。 ・$("a").click(function(){$("#idou").animate({left:0},"slow");});でリンクをクリックすると左に戻す。この時の#ugokuが問題。 ・移動の角度は50度で設定、#idouのleftが-1000~-1500pxの間というような特定の間に#ugokuの画像を画面の右上から左下にanimateで流したい。 最後の項目をやろうとして完全に行き詰ってしまって困っています。 どちらかというと数学の問題かもしれません。 animate動作中に、#idouのleftが~pxになったときを拾うようなイベントは存在するのでしょうか?その他良いやり方やURLあれば教えて頂けると幸いです。 よろしくご教授ください。

専門家に質問してみよう