prototype.jsとjquery.jsの併用がうまくいかない！？
- prototype.jsとjquery.jsを併用すると、どちらかの機能しか有効になりません。
- スクロール機能はjquery.jsを、ライトボックス機能はprototype.jsを使っていますが、後から読み込んだ方しか機能しません。
- 両方を機能させるためには、どう修正すればいいのか教えてください。
- ベストアンサー
prototype.jsとjquery.jsの併用がうまくいきません。
prototype.jsとjquery.jsの併用がうまくいきません。 2つの機能をページに組み込みたいと思っています。 (1)横並びの画像が自動的にスクロールする (2)画像をクリックすると、ライトボックスで表示する 参考にしたのは下記のサイトです。 http://logicbox.net/jquery/simplyscroll/ http://www.lokeshdhakar.com/projects/lightbox2/ しかし、実際にページを作ってみるとどちらかの機能しか有効になりません。 どちらもいくつかのjsファイルを<script>タグで読み込みますが、 後から読み込んだ方しか有効に機能しないのです。 スクロールの方はjquery.jsを、ライトボックスの方はprototype.jsを使っているのですが、 それが良くないのでしょうか。 両方を機能させるにはどう直したらいいのか、ご教授下さい。 もしくは、両方がうまく機能しているサイトがあれば、URLを教えて下さい。 よろしくお願いします。
- souitirou1
- お礼率50% (52/104)
- JavaScript
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
prototypeとjqueryと言うことですよね？ どちらもよく知りませんが、$関数がもろにバッティングしてしまうので、それを避けなければなりません。 以下のサイトに、その場合の回避法が出ています。 http://semooh.jp/jquery/ref/cont/with_prototype/ まぁ、わざわざ両方を使わなくても、どちらかにしてしまったほうが良さそうな気がしますが。 探せば、ほとんど同じ機能のプラグインが、それぞれをベースにしていろいろ出されていると思います。 例えば、lightBoxのjquery版 http://leandrovieira.com/projects/jquery/lightbox/ みたいなのを用いれば、（↑）のような回避法をとらなくてもすむはずです。 （プラグイン同士がバッティングしていないかまでは確認していません。）
その他の回答 (1)
- hanmemomo
- ベストアンサー率35% (205/580)
入れたサイトをとりあえず作ってもらえませんかね。 原因は想像がつくのですが、実体がないと説明しにくいのです。 同じ環境を回答者が作るのは結構大変なので、 仮でどこかのサーバーにUpしてアドレスを教えてもらえれば、 動かない場所をポンポイントで説明できる方が ここには沢山いますので
お礼
hanmemomo様、アドバイスありがとうございます。 確かに、サイトを見せれば話が早かったですよね。 ただ、会社の仕事の一環で作っているので、それができませんでした。 fujillin様の方法でうまくいかなければ、仕事に関わる部分を省いてフリーのページにアップしようと思っておりました。 が、上記の通りうまくいきましたので、今回は見合わせました。
関連するQ&A
- jQuery版のlightbox.jsのカスタマイズについて質問です。
jQuery版のlightbox.jsのカスタマイズについて質問です。 やりたいことは下記の2点です。 1.「prev」や「next」をhover時ではなく絶えず出ているようにする。 2.任意でグルーピングをする。 使用したjQuery版lightbox.jsは下記のサイトからダウンロードしました。 jQuery lightBox plugin http://leandrovieira.com/projects/jquery/lightbox/ JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら 教えていただきたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jquery-1.3.2.min.jsのスクロール
初歩的な質問でスイマセン。 ページ内にスムーズスクロールのためjquery-1.3.2.min.jsをつかっているのですが、lightboxを使用しているページだけスムーズスクロールせずにアンカー先へページが移動します。lightboxのバージョンはLightbox v2.04です。 ちなみにlightboxが実装されていないページはスムーズスクロールします。 なにか設定方法あるのでしょうか？ サンプルページ http://cm-creation.net/yoshida/nozue/new/index.html よろしくお願い致します。
- ベストアンサー
- JavaScript
- prototype+jquery+プラグイン
prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか？ エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>
- 締切済み
- JavaScript
- jQueryとprototypeの共存
prototype.jsとjQuery.js、そのプラグインであるjquery.cycle.all.pack.jsを共存させ、データベースから取り出した画像にエフェクトをかけて表示したいと思っています。 ライブラリの共存には'jQuery.noConflict();'を使うところまでは調べたのですが、その使い方がよくわかりません。現在は以下のようにプログラムを書いていますが、jqueryの効果が出ていません。使い方、描き方の間違い等ありましたらご指摘お願いいたします。 <script type="text/javascript" src="./js/prototype.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.cycle.all.pack.js"></script> <script type="text/javascript"> <!-- jQuery.noConflict(); function loadHello(){ new Ajax.Request( './php/Search2.php', { onComplete : function( httpObj ){ $('検索結果表示領域').innerHTML = httpObj.responseText; } } );} jQuery(function() { jQuery(".sample").cycle( { fx:'shuffle', delay: -2000 }); }); // --></script> </head> <body onLoad="loadHello()"> <ul id="sample"> <div id="検索結果表示領域"></div> </ul> </body> </html>
- ベストアンサー
- JavaScript
- ｊｓ プロトタイプ
javascriptソースコード <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script src="fastclick.js"></script> <script> function print(str){ document.write(str + "<br />"); } function Car(manufact, name){ this.manufact = manufact; this.name = name; } Car.prototype.info = function(){return this.manufact + " " + this.name;}; document.write("<p>"); var car1 = new Car("Toyota", "PRIUS"); print(car1.info()); var car2 = new Car("Honda", "INSIGHT"); print(car2.info()); document.write("</p>"); </script> </body> </html> 23行目なのですが「 Car.prototype.info 」とありますがｊｓにおいてプロトタイプはオブジェクトだという事は認識しておりますがプロトタイプを宣言する意味は何があるのでしょうか？ 参考urlです。 http://www.ajaxtower.jp/js/function_class/index3.html
- ベストアンサー
- JavaScript
- Lightbox JS v2.0について
lightbox v2.0(http://www.huddletogether.com/projects/lightbox2/)を、作成中のホームページに取り込んでみました。 (ブログではありません。) なんとか表示はされるのですが、IE7とFirefoxで、表示のされ方が違うのです… ・IE7…フェードインで出てきた画像が、画面中央でなく、画面上にくっついている。 ・Firefox…画像のコメントとCLOSEボタンの下に横スクロールが表示される 他のサイトさんでlightbox v2.0を使用しているところを、IE7とFirefoxの両方で見ても崩れてないんですけどね… なぜなのでしょうか？(´ω｀) それと、http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.htmlさんで配布されているCLOSEボタンを取り入れたいのですが、設定の詳細がわかりません… 詳しい方いらっしゃいましたら、ぜひご指導ください！
- ベストアンサー
- レンタルサーバ・ASP
- jquery.validate.jsについて
jquery.validate.jsを使用し、エラー付きのフォームを作りました。 チェックボックスのみ、エラーを出すことができません。 jquery.validate.jsはその機能はありませんよね？？ これに追加するか、他の方法をとりたいのですが、どうすればよろしいでしょうか？
- ベストアンサー
- JavaScript
- jQuery版のlightbox.jsについての質問です。
jQuery版のlightbox.jsについての質問です。 配布元：http://leandrovieira.com/projects/jquery/lightbox/ お客さまから、1つの画像から複数の拡大画像にリンクさせたいという要望があって困っています。 a要素に「lightbox」というclassが指定されているとlightboxが動くようになっており、 お客様の方で下記のソースコードで一応実現できているようなのですが バリデータでエラーがあるのでもっと良いやり方はないか、というご要望です。 <a href="拡大画像1" class="lightox"><img src="縮小画像1"></a> <a href="拡大画像2" class="lightox"></a> <a href="拡大画像3" class="lightox"></a> 上記のソースで、縮小画像1をクリックすると拡大画像1に「next」が付いて次の拡大画像も表示出来るようになりますが、1つ目以外のa要素が当然空になるので文法上よくない状態です。 文法もおかしくなく、1つの縮小画像から複数の拡大画像を表示していくことは可能でしょうか。 JavaScriptに詳しい方、方法をご存じの方がいらっしゃいましたら、教えていただけるとありがたいです。 よろしくお願いいたします。
- 締切済み
- JavaScript
- 複数のjQueryを導入するには…？
見てくださってありがとうございます。 サイトにスムーススクロールとフォトギャラリーのjQueryを入れたのですが片方が動きません。 ------------------------- <!-- スムーススクロール↓ --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/test.js"></script> <!-- フォトギャラリー↓ --> <link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" /> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> ------------------------- コードは上記のように記述してありあます。 スクロールはhttp://klutche.org/archives/536/様のを使用、、 フォトギャラリーはhttp://myisland.jp/様のフォトギャラリーSample#2を使用しています。 片方消すと正常に動くのでコードは間違っていないと思いますが なぜjsフォルダに一個一個入れて呼び出しているのに動かないのかわかりません。 head内にバージョン違いのjQuery本体を呼び出すと動かなくなるのは知っていますが この場合本体は一個しか呼び出していないですよね・・・？ プログラムさっぱりでとても困っています。 解決策よろしくお願いします。
- 締切済み
- JavaScript
- jQuery 1.7.2と1.7.1の使い分け
JavaScript初心者です。 jQuery Page Scroller -version 3.0.8 を使用しようと思っているのですが、 これはjquery-1.7.1.jsに対応しているのか、jquery-1.7.2.jsを使用すると作動しません。 しかし、lightbox2.5１を使用したいのですが、こちらがjquery-1.7.2.jsに対応しており、jquery-1.7.1.jsを使用すると作動しません。 どちらかを使用して両方をうまく作動さす方法はありますでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
fujillin様、回答ありがとうございます！ まず回避法を試してみたのですが、うまくいきませんでした。 次にlightBoxのjquery版で試しますと、無事どちらも動くようになりました。 仰るとおり、わざわざprototypeとjqueryを併用したのがいけなかったですね。 jqueryならjqueryのプラグインのみでページを作るようにします。