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>

多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、
上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば
教えてください。

よろしくお願いします。

回答No.3

yyr446

No.1です。No.1の回答で一応出来ましたよ。
<script>の他に<CSS>もお忘れなく
<link rel="stylesheet" href="spacegallery.css" type="text/css">
<link rel="stylesheet" href="custom.css" type="text/css">
<link rel="stylesheet" href="nivo-slider.css" type="text/css">
custom.cssは、<div id="myGallery">がデフォルトなので、
id="myGallery"の名前を変えたら、修正がいります。

おまけ、
<div id="myGallery" class="spacegallery">と
<div id="hoge">
の中身を同じにして、
nivoSliderの初期化で
afterChange: function(){
$('#fuga').click();
}
を追加し、
spacegallery.jsの
$('<a href="#"></a>')
を
$('<a href="#" id="fuga"></a>')
に書き換えてしまえば、
2つのギャラリーが連動できた。

回答No.2

fujillin

それぞれのjsの内容は見ていませんが…

ご提示のソースですと、
　<script type="text/javascript" src="js/jquery.js"></script>

　<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
と、タイミングをあけて、2種類のjqueryを読み込んでいるようですが、それを一つにしてあげれば動きませんか？
最新版が1.4.2のようなので、1.4.2のほうを残して、かつ、それを一番最初に読込むようにしてあげれば動くのではないかと…？
（それでもダメな場合は、それぞれのjsがコンフリクトしているのかも…）

回答No.1

yyr446

「案ずるより生むが易し」、「大は小をかねる」とかいった諺
がありますから、とりあえず単純に混ぜて、試してみましょう。
（全然調べてませんが）
<script type="text/javascript" src="js/jquery-1.4.2.min.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 type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script>
$(document).ready(function(){
$('#myGallery').spacegallery({loadingClass: 'loading'});
$('#hoge').nivoSlider({
effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、 fold、fade、random
slices:15, //分割枚数
animSpeed:500, //アニメーションスピード
pauseTime:3000, //停止時間
directionNav:true, //方向ナビ
directionNavHide:true //隠す
});
});
</script>