• 締切済み

複数のライブラリの使用について(jQuery)

現在jQueryを使って、タブメニュー(http://25egg.com/sample/tabmenu/)とスライダ(http://bxslider.com/)を併用したものを開発しようと思っています。 つまりタブメニューを複数用意し、そのタブメニューの中にスライダをおくかんじです。 そしていざ作ってみたら、一応タブの中にスライダがでてきて予想通りの挙動を確認することができました。 しかし、一番目のタブ(一番最初に選択されるタブ)にスライダを設置した場合のみに限られ、一番目ではなく二番目のタブにスライダを設置したら、中身が空で表示されてしまいます。 うまく伝える事ができないので、実際にサンプルを以下にまとめました。 http://web.sfc.keio.ac.jp/~t11881tm/sample.zip index.html中のコメントアウト(タブの追加)をはずすとうまくうまく動いてくれません! よろしくお願いします!

みんなの回答

回答No.1

http://jlamp.net/archives/295 理由は↑と同じです。

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

関連するQ&A

  • jqueryのスライダー　カスタムについて

    http://zxcvbnmnbvcxz.com/jquery-簡単かつ高性能なスライダー【bxslider】の設置-divス/ こちらのスライダーを使用して、 「next」と「back」を画像にしたいのですが、 どこを書き換えらできますでしょうか。 html内に記述がないので多分以下のjsだと思うのですが。。 http://preview.spawn.jp/demonstration/js/jquery.bxSlider.min.js 詳しい方、どうぞよろしくお願いしあます。

  • bootstrap3 タブ切替え内でのjquery

    Bootstrap3のTab機能を使い、ページ遷移を行っているのですが、その際にタブ切り替えを行うと 切り替わったコンテンツ内のjavascript が機能しなくなります。 利用しているjquery はbxsliderです。 タブ１内で動いているスライダー、カルーセルをそのままタブ２、３、４にコピーしても動きません。 知識のある方の回答をお待ちしております。 宜しくお願いいたします。

  • JQUERYについて

    JQUERYについてです。 下のフォトスライダーですが、キャプションをバケットの中に入れても表示されません。 http://opiefoto.com/articles/photoslider よくみると、サンプルも表示されていません。 キャプションを表示するには、どうしたら表示できますか？

  • jQuery UIを使用した画像スライダーについて

    お世話になります。 当方、htmlとcssの知識しかなく、Javascriptはほとんど未知の領域なのですが、 ホームページに動きを付けたくて、jQuery UIを使用した画像スライダーの設置方法を載せたサイトを探していました。 そこで、下記のサイトさんのスライダーがイメージに近かったので使用したいと考えています。 ttp://phpjavascriptroom.com/?t=ajax&p=jquery_plugin_imagegallery#a_image_rotator サンプルページ ttp://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/featured_content_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB そっくりそのまま実装することができ、スタイルシートの記述をいくつかいじって 枠の幅や画像の大きさを変更するまではできたのですが、 項目を追加することができませんでした。。 ※サンプルページで、4つある項目の一番下ハニートースト＠…の下にさらに項目を追加して、5つか6つくらい画像がスライドするようにしたいのです。 htmlファイルで、<li>や<div>を追加して、id="nav-fragment-4"をid="nav-fragment-5"にして 連番にもしましたが、それだけではうまく画像が表示されません。 ※4番目のタグをコピーして5番目を作りましたが、5番目をクリックしても画像が表示されず真っ白で、そのあと4番目をクリックすると、画像が2つ縦に連なって表示されます。 javascriptの記述で最大何枚画像が表示されるという記述があるのでしょうか？ 素人の質問なので、わかりにくい部分はあると思いますが、 何卒、お力添えよろしくお願いします！！

  • jqueryでスライダーを設置した時に

    jqueryでスライダーを設置した時に設置したページのテキストが画像がスライドするタイミングで点滅してしまうようです。 現象が起こっているのはMacのsafariとchromeです WindowsのIEやモダンブラウザ、MacのFirefoxではオッケーのようです。 ちなみにコンテンツスライダーは、glide.jsやbxslider.jsです。両方とも同じ現象が起きます。 chrome はwebkitではなくなりましたし、、、 該当ページでは、スティッキーヘッダ、トップへ戻るボタン、ロールオーバーや複数のタブパネルなど、jQueryの塊のようなページになっておりまして、、、 ただ、それらをすべて無効にして、スライダだけを実装状態にしても同じようです。 スライダーそれぞれのCSSをみてみましたが、同ページにあるCSSの他のセレクトと同名のセレクタはないようです、、、 どなたか似たような現象を解決された方がいらっしゃいましたらご教示願えますでしょうか？

  • jQueryのui.tabのcookieについて

    jQueryのui.tabのcookieについて ブログのサイドバーにタブメニューを設置して、ユーザーがタブをクリックするとそのタブを記憶して同じブログ内の別のページへ移動してもそのタブの内容が表示されるというものを作ろうと思い、 jQueryのui.tabで作ったタブにjquery.cookieを利用してクッキーを保存するようにしたんですが… $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); タブをクリックして同じブログ内の別のページへ移動するとタブが初期状態に戻ってしまいます。 どなたか改善策を知っているかたは教えてもらえないでしょうか？？よろしくお願いします！！

  • jQueryの画像を使ったタブメニューについて

    下記のサイトを参考にタブメニューを制作いたしました。 jQueryを使ったタブ（画像）による画面切り替え http://web.showjin.me/2011/05/jquery_tab_image.html 各コンテンツの中にリストタグやpタグなどで内容を記載すると うまくいくのですが、divタグを使用するとまったく表示されないようです。 divタグに style="display: none;"と読み込まれてしまいます。 各コンテンツの内容にjqueryを使用してサムネイルのアルバムを設置したいと 思っているので、divタグなどでも問題なく表示されるようにしたいと思っています。 scriptを修正して実現できる方法が分かる方がおられましたら お教え頂けないでしょうか？ どうぞ宜しくお願い致します。

  • Ajaxとjqueryの同ページでの使用について

    webに詳しい方にお聞きしたいのですが、HPのトップページにajaxメール(下記URL参照） http://www.ajaxmail.jp/ というものを使わせていただいているのですが、同じトップページに、 javascript jqueryのdual slider(下記URL参照） http://www.hugoandcat.com/DualSlider/index.html を設置したところ、ajaxメールが動作しなくなってしまいました。 メールフォームは起動するのですが、ajaxメール独自の動きがなくなってしまい、困っております。 dual sliderを削除すると、ちゃんと動作するのですが、、しかたないのでしょうか？ 当方Jquery　AJAXともにそこまで詳しくないので、なにか相性の問題とか、タグの設置場所でバグがおこったりするものなのか。調べて様々やってみたのですが、原因がわかりません。 わかる方いらっしゃいましたらよろしくお願いいたします！

  • jQuery bxSlider 画像に変更

    jQueryのスライダー「bxSlider」矢印画像を追加してテキストを画像に変更したい ＝＝＝＝＝＝＝＝＝＝＝ コード ＝＝＝＝＝＝＝＝＝＝＝ <script> $(document).ready(function(){ $('.bxslider').bxSlider({ auto: true, pagerCustom: '#bx-pager' }); }); </script> ＝＝＝＝＝＝＝＝＝＝＝ html ＝＝＝＝＝＝＝＝＝＝＝ <ul class="bxslider"> <li><a href=""><img src="http://xxx.com/image/01.png" /></a></li> <li><a href=""><img src="http://xxx.com/image/02.png /></a></li> </ul> ＝＝＝＝＝＝＝＝＝＝＝ 表示画面 ＝＝＝＝＝＝＝＝＝＝＝ スライド画像の下に、 PrevNextのテキストリンクがでてきます。 ＝＝＝＝＝＝＝＝＝＝＝ 実装したい事 ＝＝＝＝＝＝＝＝＝＝＝ 本体サイトの用に スライド画像の左右に矢印画像を入れたい PrevNextのテキスト文字を消して●●●の画像に変更したいです。 本体サイト http://bxslider.com/ jquery.bxslider.cssの97行目辺りを変更してみましたが、変わりません。 カスタマイズをご存知の方がおられましたらご教授ください。 /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 10px; background: url(http://xxx.com/images/pre.png) no-repeat 0 -32px; } .bx-wrapper .bx-next { right: 10px; background: url(http://xxx.com/images/next.png) no-repeat -43px -32px; }

  • 【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← とか順不同で出来たら最高なんですが、そこまで私の技術は出来ないので、可能であればスタートする写真をランダムで出来たらと思ってます。 ご教授お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する