複数のjQueryを使用するときの記述の仕方

質問

今、こちらのjQueryと
http://jsajax.com/Articles/jQueryLavaLamp3/1083

こちらのjQueryを
http://www.css-lecture.com/log/javascript/039.html

同じページ内で使用しようとしています。

記述は以下の通りです。
----------------------------------------------------
<!-- ▼前者のjs -->
<script src="js/jquery-1.2.6.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.lavalamp.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$("#lavaLamp").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>

<!-- ▼後者のjs -->
<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" src="js/main/jquery.cycle.js"></script>
<script type="text/javascript" src="js/main/slideshow.js"></script>

このように記述しても後者のものしか動きません。
前後逆にすると前者が動きます。

以前の質問でjQueryのファイルには記述する順番があるとお答えを頂いたのですが、
調べても初心者の私には理解できず・・・。
こちらのファイルを同時に使用するにはどのような順番で記述したら宜しいのでしょうか？

大変困っております、どうか宜しくお願い致します。

回答No.1

fujillin

ご質問のタイトル通りに本当に『複数のjQueryを使用』しているみたいですが、大抵のプラグインはjqueryのバージョンが新しいものでも動くはずだと思いますので、2種類を使用する意味があるのでしょうか？
ご提示の内容だとv1.2.6とv1.3を読み込んでいるみたいですが、多分、v1.3だけで動作するはず。（最新版はv1.6.1のようですが）
何も処置をしないで後から読み込むと、まるまる上書きされてしまうので、それまでの処理（設定など）が消えてしまう可能性があります。

新しい方のバージョンを先に読み込んで、後はプラグインだけ読むようにすればいけるのではないでしょうか？

大抵のプラグインは、コンフリクトを避けるように作成されているとは思いますが、運が悪いと（↑）でもダメな場合があるかも知れません。
その場合は、別の同種のプラグインに変えてみるか、原因を探ってカスタマイズするとかの対処が必要になりそうです。

お礼

ご回答頂きありがとうございます。

教えて頂いた通り、1.2.6の方を消して1.3を一番前に持ってきて、
その後ろに他のjsを記述したら両方動くようになりました！

本当にありがとうございました！！

ここで新たな問題なのですが、
http://www.webcreatorbox.com/tech/jquery-tips20/
こちらの「3. ページトップへスクロールする」を更に同ページ内で使用すると
スクロールが機能しません。

以下のように記述しています。

------------------------------------------------------------------------

<script type="text/javascript" src="http://www.google.com/jsapi"></script><!-- 前者、後者 -->
<script type="text/javascript">google.load("jquery", "1.3");</script>

<script src="js/jquery.easing.min.js" type="text/javascript"></script><!-- 前者 -->
<script src="js/jquery.lavalamp.min.js" type="text/javascript"></script>

<script type="text/javascript" src="js/main/jquery.cycle.js"></script> <!-- 後者 -->
<script type="text/javascript" src="js/main/slideshow.js"></script>

<script type="text/javascript">
$(function(){//スクロール
$("#toTop").click(function(){
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top }, 'slow','swing');
return false;
})
});

$(function() {//後者
$("#lavaLamp").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return false;
}
});
});
</script>

サンプルサイトではスクロール用にjquery.jsを使用していますが、
これは1.3で代用になるのかな、と考えこのような記述にしました。
ですがスクロールが上手く動かないため、
<script type="text/javascript" src="js/jquery.js"></script> <!-- スクロール -->
↑これを色んな場所にいれてみましたが、やはり反応しないか、
逆に前者、後者が動かないようになってしまいました。

どのように記述すればスクロールも上手く動くようになるのでしょうか？
どうかご回答を宜しくお願い致します。