同一ページ内の複数のタグに同一のJQueryを実行

質問

JQuery初心者です
同一ページ内にサムネイル付ギャラリーを複数作り、
ギャラリーごとに横にスクロールする形で作っています。
今の状態ですと、1ページ目は正常動作で問題はありません。
ただ、1ページ目のJQuery処理前に<a href="#pege2">ページ2へ</a>で2ページ目にスクロールすると、2ページ目のメイン画像抜けてしまいます。
恐らく、前ページでのJQueryの処理が終了してないからだと思います。しばらくすると
前ページの処理が終了し2ページ目のメイン画像に反映されます。
これをどうにか<section id="pege●">ごと、もしくは<a href="#pege●">ページ●へ</a>をクリックしたらJQueryが実行する事が出来ないでしょうか？
色々調べてみましたが、出来ませんでした。
ご享受の程、宜しくお願いいたします。
参照ページ（http://www.tam-tam.co.jp/tipsnote/javascript/post68.html）

html（こんな感じで作ってます）
<article>
<section id="pege1">
<section id="view"><!-- メイン画像-->
<p><img src="images/big_a01.jpg" width="" height="" alt="" /></p>
<p><img src="images/big_a02.jpg" width="" height="" alt="" /></p>
</section>
<ul id="thumbBtn"><!-- サムネイル画像-->
<li><img src="s_a01.jpg" width="" height="" alt="" /></li>
<li><img src="s_a02.jpg" width="" height="" alt="" /></li>
</ul>
<div id="details"><!-- 説明-->
<h2>説明文</h2>
<p><a href="#pege2">ページ2へ</a></p>
</div>
</section></section>

<section id="pege2">
<section id="view"><!-- メイン画像-->
<p><img src="images/big_b01.jpg" width="" height="" alt="" /></p>
・以下同じ
<p><a href="#pege3">ページ3へ</a></p>
</section></section>
<section id="pege3">
・以下同じ
</section></section>
</section>
</article>

JQueryの記述は次の通りです。
<script type="text/javascript">
$(function (){
//設定
var active="active",interval=5000;
var index=0, timerId=null;
var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");

tabs.each(function(){$(this).removeClass(active);});
content.hide();
cap.hide();
tabs.eq(0).addClass(active);
content.eq(0).fadeIn(0);
cap.eq(0).fadeIn(0);

//クリックされたらactiveというクラスを付与、
//切り替え、タイマーをリセット
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
return false;
});

//タイマー
setTimer();
function setTimer(){
timerId=setTimeout(timeProcess,interval);
return false;
}

function timeProcess(){
change((index+1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}

//切り替え
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
//fadeout
setTimeout(function(){
content.eq(index).stop(true, true).fadeOut(0),
cap.eq(index).stop(true, true).hide()
;}, 0);
//fadein
setTimeout(function(){
index=t_index;
content.eq(index).fadeIn(0),
cap.eq(index).fadeIn(0)
;}, 0)
}
});
</script>

回答No.2

warpspace · ベストアンサー

＞id名をそれぞれ変えて設定してみます。
id指定でなく、class指定にすればよいのではないですか？。
class指定であれば、同一ページ内の複数箇所で指定可能です。

お礼

何回もお返事頂いてありがとうございます。
clssにする事は既に試してみましたが、駄目でした。

先程、IDをそれぞれ設定し、同じjQueryのjsを複数用意してそれぞれに記述してみたところ、
それぞれ正常に動きました。
とりえず望み通りの動作になりましが、
もっとスマートなやり方があればご指摘頂きたいと思います。

回答No.1

warpspace

＞2ページ目のメイン画像抜けてしまいます。
具体的にどのような現象ですか？。

同一ページ内ではidはユニーク出なければなりません。
　　id="thumbBtn"
が複数箇所に存在していませんか？。

お礼

＞2ページ目のメイン画像抜けてしまいます。
＞具体的にどのような現象ですか？。
状態としては真っ白な状態です。

ご指摘ありがとうございます。
たしかに同じidを複数設定してました。
同じレイアウトなので、問題がないと思っていました。
もう一度、id名をそれぞれ変えて設定してみます。