• 締切済み

jQueryにて複数ライブラリを動かす

wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。

  • peco33
  • お礼率79% (123/154)

みんなの回答

  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.2

デバッグツール(ブラウザでF12キー押下)のコンソールになにかエラーはでていませんかね？

  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

>jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ 動きます。 公式を見ていないので記述が間違っているかどうかは分かりませんが、おそらく2つのプラグインが何かしらの機能で競合しているから動かないのでしょう。javascriptを書かれるつもりがないのであれば、諦めて他のプラグインを探したほうが早いです。もしくは、その辺りが、javascriptを書かない方法の限界です。

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

関連するQ&A

  • 複数のバージョンのjQueryを同時に使用

    複数のjQueryライブラリを同時に使用するには http://jsajax.com/articles/jQueryUsingMultipleVersion/2012 上記サイトを参照しましたがわからなかったので質問いたします。 「1.3.2と1.1.3.1」のようにバージョンの違うjQueryライブラリを同時に使いたいのですが、 以下のように記述した場合、Feature Listが正常に動作しません。 バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか よろしくお願いいたしします <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <!-- ▼jquery_auto --> <script type="text/javascript" src="jquery/jquery_auto_j.js"></script> <!-- ▼animatedcollapse.js --> <script type="text/javascript" src="jquery/animatedcollapse.js"></script> <script type="text/javascript" src="jquery/animatedcollapse-settings.js"></script> <!-- ▼Feature List --> <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item:0 } ); /* // Alternative $('#tabs li a').featureList({ output:'#output li', start_item:1 }); */ }); </script>

  • 同HTML内で複数のjQueryを設置する方法

    複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内にいれようとしていますが、 片方のみしか作動しません。 色々と探した結果、複数使う場合はちゃんとした記述方法があるということがわかったのですが、その方法が詳しくわかりません。 http://stacktrace.jp/jquery/with_other_lib.html こちらのサイトでは意味がわからず・・・ 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="js3/accordian.pack.js"></script> <script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js2/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js2/jquery.timers-1.1.2.js"></script> <script type="text/javascript" src="js2/jquery.easing.1.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#photos').galleryView({ filmstrip_size: 6, frame_width: 145, frame_height: 160, background_color: 'transparent', nav_theme: 'dark', border: 'none', show_captions:true, caption_text_color: 'black' }); }); </script> ---------------------------------------- タブメニューがaccordian.pack.js、 その下のすべてがスライドショーのものです。 スライドショーはこちらを参考にしてつくりました。 http://spaceforaname.com/filmstrip.html 本当に困っております。 どうかご回答お願い致します。

  • Jqueryの干渉について

    Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。

  • jqueryのscrollfollowが動かない

    jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか？ スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか？ どたなか、よろしければお助けください。 以下が、現在のソースです。 （「※」マークのところがそのスクリプトの記述部分です） ----------------------------------------------------------- <!-- JS -->（※ここからがscrollfollowのスクリプトです。） <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> （※ここまでがscrollfollowのスクリプトです。） <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> （※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。） <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> （※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。） ------------------------------------------ 以上です。 よろしくお願いいたします！

  • 複数の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> 両方とも単体では稼働します。 初心者で大変申し訳ございませんがわかる方宜しくお願い致します。

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • [ｊQuery]colorboxの干渉について

    当方jQuery初心者です。この場を借りてご質問させて下さい。 現在、jQueryのfullPage(http://alvarotrigo.com/fullPage/)を使用した、横スクロールのサイトを作成しております。 そのコンテンツの中で、同じくjQueryのcolorbox(http://www.jacklmoore.com/colorbox/)を使用し、 インラインhtmlを表示させたいと思っております。 しかしながら、同時に動かそうとするとcolorboxが全く動きません。 単体でのcolorboxは動くので、恐らくfullPageとの干渉を起こしていると思うのですが、何か解決方法はございませんでしょうか。 質問させていただく前に調べた結果、colorboxはスライダーと干渉を起こすとのことで、 colorboxのreturnFocusをfalseにすることで解消されるとあったのですが、それでも解消されませんでした。 どなたかご教示頂けますようよろしくお願い致します。 以下、現在のソースです。 ------------------------------------------------------------ <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type='text/javascript' src='js/moment.min.js'></script> <script src="js/jquery.easings.min.js"></script> <script src="js/jquery.fullPage.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false, anchors: ['page'], navigation: false, navigationPosition: 'right', navigationTooltips: ['page'], slidesNavigation: true, slidesNavPosition: 'top', //Scrolling css3: true, scrollingSpeed: 700, autoScrolling: false, scrollBar: false, easing: 'easeInOutCubic', easingcss3: 'ease', loopBottom: false, loopTop: false, loopHorizontal: true, continuousVertical: false, normalScrollElements: '#element1, .element2', scrollOverflow: true, touchSensitivity: 15, normalScrollElementTouchThreshold: 5, //Accessibility keyboardScrolling: true, animateAnchor: true, recordHistory: true, //Design controlArrows: true, verticalCentered: true, paddingTop: '-10em', resize : false, //Custom selectors sectionSelector: '.section', slideSelector: '.slide', //events onLeave: function(index, nextIndex, direction){}, afterLoad: function(anchorLink, index){}, afterRender: function(){}, afterResize: function(){}, afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, onSlideLeave: function(anchorLink, index, slideIndex, direction){} }); }); </script> <script src="js/jquery.colorbox.js"></script> <script> $(function(){ $(".inline").colorbox({ inline: true width:"700px" returnFocus: false }); }); </script> ------------------------------------------------------------

  • jqueryにて

    こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！

  • jQueryについて質問です。

    jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。

  • 同HTML内で複数のjQueryを設置する方法

    Movable Type５で作製しています。 複数のjQueryを使用し、（Ａ）はヘッダーにメニュー、（Ｂ）はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとＢのみが作動する状態です。 jQueryもｊｓもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません（同様の質問なのかも不明ですが・・・） 本当にわからないので、宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する