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/pos …)
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ベストアンサー
- 回答日時:
>id名をそれぞれ変えて設定してみます。
id指定でなく、class指定にすればよいのではないですか?。
class指定であれば、同一ページ内の複数箇所で指定可能です。
何回もお返事頂いてありがとうございます。
clssにする事は既に試してみましたが、駄目でした。
先程、IDをそれぞれ設定し、同じjQueryのjsを複数用意してそれぞれに記述してみたところ、
それぞれ正常に動きました。
とりえず望み通りの動作になりましが、
もっとスマートなやり方があればご指摘頂きたいと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Dreamweaver上とデバイスプレビ...
-
チェックボックスで画像を一括表示
-
画像のランダム表示、及び画像...
-
オンマウスで画像が切り替わっ...
-
-UWSC:IEで自動クリック-
-
背景色を透明化
-
バッチファイルでカウントアッ...
-
外部参照で画像出したいのだが...
-
USEMAPでの指定区域にマウスオ...
-
「jQuery」アコーディオンメニ...
-
Javascript <li>
-
MAX関数を使ってからLEFT JOIN...
-
Javascriptで指定した日付と時...
-
テキストエリア内の一部の文字...
-
オンマウスで画像ロールオーバ...
-
ページ遷移後のcssプロパティ保持
-
position: relativeでIE6に余分...
-
表と裏がある1枚の画像を回転す...
-
5秒後にフェードイン
-
ソート フォーム
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
画像をフェードアウト&フェー...
-
チェックボックスで画像を一括表示
-
[jQuery]bxSlider 一番最後と...
-
jsでグリッドデザインのサムネ...
-
【jQuery】2分割レイアウトで、...
-
liの数によってulの横幅を動的...
-
同一ページ内の複数のタグに同...
-
jqueryサブウィンドウにて画像...
-
神経衰弱 順番に裏返し
-
Javaスクリプトで画像を縦にス...
-
一定時間ごとに画像を切り替え...
-
横並びの画像を3枚時間差でフェ...
-
Javascriptを使用したスライド...
-
順番にクラスをつけていく方法
-
bxSliderのランダム表示について
-
html5に変えるとスライドショー...
-
エンドロールを枠の中で表示す...
-
javascriptで吹き出し
-
ご教授ください。
おすすめ情報