JQueryで動的生成のスライダが動くようにしたい

前へ 次へ
このQ&Aのポイント
  • JQueryを使用して動的に生成されるスライダが動作しない問題について相談です。生成されたスライダの中で、デフォルトで表示されていたスライダだけが動作し、動的に生成されたスライダは動かない状態です。
  • さらに、生成されたスライダのHTMLを出力する機能があるようですが、デフォルトで表示させているスライダと同様のHTMLが生成されているようです。
  • この問題を解決し、動的に生成されるスライダも動作させたいです。どのような設定が必要なのか、ご教授ください。
回答を見る
  • ベストアンサー

JQueryで動的生成のスライダが動くようにしたい

すみません。JQueryで multipleスライダのページ を作っています。 「GO!」ボタンを押すごとに、動的にスライダフレームが生成され、 それぞれのsliderが動くようにしたいです。 しかし、「GO!」ボタンを押して生成されたスライダは動かず、デフォルトで表示されていたスライダだけが動く状態です。 また、「src」ボタンでdivタグのid=eq以下のHTMLを出力できますが、見た限りではデフォルトで表示させている2つのスライダフレームと同じように見えます。 なぜこのままだと動的生成させたほうのスライダが動かないのでしょうか？ お手数おかけしますが、もしわかればご教授願います。

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

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

ANo1です。 jauery-uiのコードはわからないので、理解していないままの回答ですが… ＞全てのスライダがデフォルトの状態に戻ってしまいます。 全部のスライダーを初期化してませんか？ ＞$( "#eq > div > span" ).each(function() { ～～ をその都度実行しているとすれば、対象がその時に存在する要素全部になっているので、全て初期化されてしまいます。 実際には、初期化されるだけでなくイベントの二重設定になっていたりする可能性もあります。 ご提示のコードはわからないので、単純化した例を作成しました。 理由としくみを理解してみてください。 *要素にホバーすると、要素が移動し、そのたびに横幅が少しずつ大きくなるようにしてあります。 *最初の設定関数では、動作を設定すると同時に要素の幅を60pxに初期化しています。 「コメントアウトすると～」の行を無効化すると、ご質問のように、要素が追加されるだけの状態になります。 （全角空白は半角に） <!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"> <!-- #hoge{ width:100%; overflow:hidden; } #hoge li{ position:relative; margin-top:2em;　} #hoge li div{ position:relative; text-align:center; background-color:#aad; cursor:pointer; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ // 最初からある要素に動作を設定（初期設定） 　$("#hoge div").each(function(){init(this);}); // 新しく要素を追加（動作を設定） 　$("#create").click(function(){ 　　var elm = $("<li><div>test</div></li>"); 　　$("#hoge").append(elm); 　// 下の行をコメントアウトすると追加されるのみになる 　　init($("div",elm)); 　}); // 要素に初期サイズと動作を設定する関数 　function init(elm){ 　　$(elm).css("width",60).mouseover(function(){ 　　　$(this).animate({left:300}, 300, function(){ 　　　　$(this).css("width", $(this).width() + 10).animate({left:0}, 300); 　　　}); 　　}); 　} }); //--> </script> </head> <body> <p> <input id="create" type="button" value="create"> </p> <ul id="hoge"> <li><div>test</div></li> <li><div>test</div></li> </ul> </body> </html>

gaiaxgaiax
質問者

お礼

<STYLE> #eq div span { width:100px; float:left; margin:15px } #eq div { width:100px; float:left; margin:15px } .color{ background:#669999; } </STYLE> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.8.2.js"></script> <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script> <script type="text/javascript"> load(); function load(){ var span = document.getElementsByTagName("span"); if (span != null) { for (i = 0; i < span.length; i++) { changeColor(span[i], "color" + (i+1)); } } } function changeColor(elements, colorId) { var red = elements.slider( "value" ) * 100, green = 180, blue = 180, hex = hexFromRGB( red, green, blue ); $( "#" + colorId ).css( "background-color", "#" + hex ); } function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } // output actual $("#eq").html() function warm() { fid("output").innerHTML = fid("eq").innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<br/>"); } // output document.body.innerHTML function warm2() { fid("output2").innerHTML = document.body.innerHTML.replaceAll("<", "&lt;").replaceAll(">", "&gt;<br/>"); } // replace org to dest in expression. String.prototype.replaceAll = function (org, dest){ return this.split(org).join(dest); } // return document.getElementById(id) function fid(id){ return document.getElementById(id); } // replace org to dest in expression function replaceAll(expression, org, dest){ return expression.split(org).join(dest); } // output the slider HTML var cnt = 1; var sample = '<DIV style="position:absolute;top:%top%px;left:100px;border:black 1px solid;background:#69BBBB;" id="color%cnt%">'; sample += 'test<SPAN id="s%cnt%" class="ui-slider ui-widget ui-widget-content ui-corner-all ui-slider-horizontal" sizcache06150691335632016="2 3 1" jQuery182023679669074682297="%cCnt%" rel="1" sizset="true" sizcache047932779737654934="59 19 422" jQuery18204489214198968289="%jCnt%">'; sample += '<DIV style="WIDTH: 0%" class="ui-slider-range ui-widget-header ui-slider-range-min"></DIV>'; sample += '<A style="LEFT: 0%" id=a%cnt% class="ui-slider-handle ui-state-default ui-corner-all" href="file:///C:/Users/Administrator/Desktop/sliders.html#" jQuery182023679669074682297="%csCnt%" jQuery18205026261943648269="%jsCnt%">'; sample += '</A>'; sample += '<DIV style="WIDTH: 0%; OVERFLOW: hidden" class="ui-slider-range ui-widget-header ui-slider-range-min">'; sample += '</DIV>'; sample += '</SPAN>'; sample += '<P></P>'; sample += '</DIV>'; $(function(){ $("#eq > div > span").each(function(){ init(this); }); $("#create").click(function(){ var temp = sample; var temp = temp.replaceAll("%cnt%", cnt); var temp = temp.replaceAll("%jCnt%", cnt * 12 + 6); var temp = temp.replaceAll("%cCnt%", (cnt+1) * 12 - 2); var temp = temp.replaceAll("%jsCnt%", cnt * 12 + 2); var temp = temp.replaceAll("%csCnt%", (cnt+1) * 12 - 6); var temp = temp.replaceAll("%top%", cnt * 100); //alert(temp); var elm = $(temp); $("#eq").append(elm); init($("#s" + cnt)); cnt++; }); function init(elm){ var value = parseInt( elm.attr("rel"), 10 ); elm.slider({ value: value, orientation: "horizontal", range: "min", min: 1, max: 2, animate: true, slide: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor(elm, "color" + id); }, change: function(event, ui) { id = elm.attr("id").replaceAll("s", ""); changeColor(elm, "color" + id); } }); } }); </script> <DIV id="eq"> </DIV> <div align="center"> <input id="create" type="button" value="create"> <FORM> <INPUT onclick="warm()" name="button" value="src" type="button"> <INPUT onclick="warm2()" value="body" type="button"> <DIV id="output"></DIV> <DIV id="output2"></DIV> </FORM> </div> こちらでできました。4000文字の関係でインデントがない件はお許しください。ありがとうございました。

gaiaxgaiax
質問者

補足

これは行けそうですね。試してみます。ありがとうございます。

その他の回答 (1)

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

jQueryもよく知らない上にjquery-uiはまったく知らないので、内容はほとんど理解していませんが… 多分、 ＞$( "#eq > div > span" ).each(function() { の中でスライダーの設定をしていると思いますが、これが実行される（最初の）タイミングでは、当然ながら後から生成されるスライダーは存在していませんので設定の対象外になっていますよね？ それなので、後から要素としては生成されてもスライダーとして機能しないのではないでしょうか？ 動的に生成した時に、その要素についてスライダーとしての定義を行なってあげれば動作すると想像します。 （私の見落としでどこかで設定していたら、別の原因ですのでスルーしてください）

gaiaxgaiax
質問者

補足

ご回答ありがとうございます。 http://success.net-c.net/jquery/sliders.html こちらのスライダのページのように、動的に // setup graphic EQ $( "#eq > div > span" ).each(function() { // read initial values from markup and remove that var value = parseInt( $( this ).attr("rel"), 10 ); //var value = parseInt( $( this ).text(), 10 ); $(this).slider({ value: value, orientation: "horizontal", range: "min", min: 1, max: 2, animate: true, slide: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor($(this), "color" + id); }, change: function(event, ui) { id = $(this).attr("id").replaceAll("s", ""); changeColor($(this), "color" + id); } }); $(this).draggable({ }); }); が呼ばれるようにしてみたんですが、いくつかスライダを生成させた後、どれかスライダを動かしてから、さらに「GO!」をクリックすると、全てのスライダがデフォルトの状態に戻ってしまいます。 動かしているほうのスライダは「GO!」を押してもそのままの状態にするにはどうすればいいか、もしわかればご教授お願い致します。

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

関連する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 スライダー

    下記のサイトを参考にjQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置しました。 参考サイトにあるようにちゃんと動かす事は出来たのですが。 しかし、現在作成中のwebページは、このコンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxにしたいのですが自分なりに試行錯誤しても、メイン表示エリアがスライダーを表示する、幅950px内の中央に来ません。 参考サイトには、今回のjqueryのソースではコンテンツスライダー要素全体を囲うブロック要素が100%でないといけないとなっています、この場合はHTML,CSS,SCRIPTどこを変えれば、コンテンツスライダー要素全体を囲うブロック要素が1000px,スライダーを表示する幅を950pxに納める事ができるのでしょうか？ 自分のソースを書くスペースが無いので、申し訳ありませんが、私が参考にしたサイトのURLよりソースをご確認頂き、ご指摘お願いいたします。 参考サイト http://black-flag.net/jquery/20121219-4407.html

  • jQueryスライダーの止め方

    jQuery Destaque Plugin http://globocom.github.io/destaque/ こちらのサイトのパララックススライダーを使おうと考えていますが、 デフォルトでスライドをストップさせる方法がわかりません。 どなたかご教授下さいますでしょうか。 また、このプラグインを使って ページネーションをつけた例がございますが、 http://www.nxworld.net/sample/jquery-destaque/ 「３」「４」を表示中に「１」「２」を押すと、 スライドが左から右に遷移しますが、 この方向を固定で右から左へ動かすことは可能でしょうか？ こちらもわかる方がいらっしゃいましたら、是非宜しくお願い致します。

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <ul> <li><a href="#jquery-ui-tabs-1">その1</a></li> <li><a href="#jquery-ui-tabs-2">その2</a></li> <li><a href="#jquery-ui-tabs-3">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

  • jQueryでタブ、スライダーを使う際の質問です

    こんにちは。WEBデザインを勉強している者です。 本やネットを見ながらWEBデザインの勉強をしていますが、まだわかっていない事が多く、どなたかお答えして頂けたら大変有り難いです。 jQueryを使って、タブ（２つ）の中にそれぞれ写真を動かすスライダーを作ったのですが、 ２つめのタブのスライダーが、写真が終わっても空白のページにどこまでも進んでしまいます。 ページネーションの数も、写真の数以上に表示されていて、何ページ目かわかるように 色が濃くなるはずが、何も変わりません。 ひとつめのタブも、ページネーションが一個飛ばしで表示されてしまいます。 初心者なのに、難しい作りにしたのがまずかったのかと反省しましたが、こういった 作りは不可能なのでしょうか？似た質問を見て、＄をjQueryに変えるものや、いろいろ試しましたがチンプンカンプンで全くできませんでした。涙 両方のスライダーを動かそうと思って、 <div　id="carousel">と<ul id="carousel_base">のidをclassに変えてしまったのですがそれが原因でしょうか.. もしおわかりになる方がいらっしゃったら、助けて頂きたいです。 スライダーはhttp://black-flag.net/jquery/20110708-3310.htmlここのコードをそのまま使いました。 ２つとも動かす為に、$('#carousel')などの#部分を全てクラス$('.carousel')に変えてしまいました。javascriptの方も#から.に変えました。 ですが２つのスライダーがまとめて動いてしまっているような感じもします。 よくわからない質問で申し訳ありません。 下にあるコード部分がもうひとつあって、<div id="tab-2">にしているという感じです。 <div id="tab-1"> <div class="carousel"><!-------------carousel start-----------------------> ↑ここはもともとidでした <ul class="carousel_base"><!-------carsousel_base start-------> 　　↑ここはもともとidでした <li> <ul> <li><img src="#" /></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> 　<li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><img src="#" /></a></li> </ul> </li> </ul><!-------carsousel_base end--------> </div><!-----------------------carousel end-----------------------------> </div><!--tab-1 end-->

  • 【jQuery】スライダーについて

    初めまして。 下記サンプルを元にカスタマイズをしてます。 参照URL http://bxslider.com/examples/ticker 写真をランダムで左に流したいのですが、 $(document).ready(function(){ $('.bxslider').bxSlider({ 'auto': true, 'minSlides': 6, 'maxSlides': 6, 'slideWidth': 160, 'slideMargin': 0, 'ticker': true, 'speed': 15000, 'randomize': true, }); }); 『'randomize': true,』を入れてもランダムになりません。 ダウンロードしたjquery.bxslider.jsの方の記述も同じように書き換えてます。 html側もサンプルのをそのまま貰ってるので <div class="slider"> <ul class="bxslider"> <li><a href="/"><img src="/img/photo01.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo02.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo03.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo04.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo05.jpg" alt="/"></a></li> <li><a href="/"><img src="/img/photo06.jpg" alt="/"></a></li> </ul> </div> でならんでます。 リロードするたびに photo01.jpg←photo03.jpg←photo06.jpg← や、 photo02.jpg←photo05.jpg←photo02.jpg← とか順不同で出来たら最高なんですが、そこまで私の技術は出来ないので、可能であればスタートする写真をランダムで出来たらと思ってます。 ご教授お願いします。

  • jQueryのclickについて

    現在仕事でjQueryを使用して、要素の表示非表示を行うイベントを作成しているのですが、一つ難題がありまして・・・まず下記に簡単に文法を記述しましたのでご覧下さいませ・・・ 『html』 <ul> <li>ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> </ul> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> <div class="area"><!-- 要素 --></div> 『jQuery』 j$("li").click(function(){ var btnNum = j$("li").index(this); j$(".area").hide(""); j$(".area").eq(btnNum).show(""); }); 上記にしたときに例えば”ボタン1”を押した時に再度”ボタン1”をおすとここでいう一番目の”area”を消去したいのですが、 toggleを使用すると”ボタン1”を押した時に”ボタン2”を押すと再び”ボタン1”を押すと、消去してからの動作をするため二度クリックしないと”area”が表示されません… そこでtoggleの様な動作で、同じボタンを二度押すと対象の要素が消去されるようないい方法ありませんでしょうか？ 折角jQueryを使用しているのでスリムな記述がしたいんですよね・・・ 宜しくお願いします。

  • 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なのでしょうか？ よろしくお願いいたします。

  • 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にて背景のURLを取得

    jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50％に縮小するにはjavascriptをどうすればいいのでしょうか？ 【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>

    • ベストアンサー
    • AJAX

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する