同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

本当に困っております。
どうかご回答お願い致します。

回答No.2

my-- · ベストアンサー

accordian.pack.jsはグローバルで$関数を定義しています。
jQueryはそれを上書きしますからjQueryのあとにaccordian.pack.jsを読み込んで下さい。

<script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js3/accordian.pack.js"></script>

逆にjQuery側はグローバルの$が使えなくなるので以下に書き換えます。
他3つのプラグインはグローバルの$を参照してませんから、そのままで修正の必要はないです。

<script type="text/javascript">
jQuery(document).ready(function($) {
...

readyのコールバック関数はjQueryへの参照を引数に渡して実行されます。
これは$(document).ready(callback)のショートカット$(callback)も同じです。

お礼

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

教えて下さったように、

<script type="text/javascript" src="js2/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="js3/accordian.pack.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">
jQuery(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>

に変更したら両方とも動くことができました！！

本当に本当にありがとうございます、助かりました。

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

回答No.1

noris02

複数のJquery という表現は正しくないのかもしれません。

片方って 何が動かないのでしょうか。
なんとなく accordian.pack.jｓが動かない という 想像です。
ソースがないとなんともいえないといいたいとこですが、
ぐぐったら　accordian.pack.jｓ 出てきたのでこれも　ソレを使ってるんじゃないかという想像で、 body 部に onload= はいってますか？
はいっているのであれば、
$(document).ready(function(){
new Accordian('basic-accordian',5,'header_highlight');
$('#photos').galleryView({

ではどうでしょう。 (これってできたかな？違ってたら、No2さんが 違うと答えてくれます。)

http://weboook.blog22.fc2.com/blog-entry-19.html

参照先は jquery、例でPrototypeの　ショートカット｛$(document)やら、$('#photos')の ＄をかえちゃう｝による切り分けを説明しているページです。jQuery の複数バージョンの同時使用例でjqueryのバージョン違いを同時使用できる方法が記載されているようです。
重そう・jquery 本体1つでまかなえるでしょ？的なノリで、私にとっては使うことがなさそうです。

お礼

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

まさに参照先を参考にしてタブメニューを作ったのですが、教えて頂いた通りに

<script type="text/javascript">
$(document).ready(function(){
new Accordian('basic-accordian',5,'header_highlight');
$('#photos').galleryView({
</script>

をいれても片方のみしか動きませんでした。
(仰るようにアコーディオンが動かないです)
onload=は入っています。

何か方法はないでしょうか？
宜しければご回答お願い致します。