jQuery表示のリンクの戻り先

Question

jQueryを用する上では基本的な事かもしれませんが、質問させていただきます。

あるサイト、はっきり言ってしまうと、ヤフーの「トリプル」というサービスなのですが、jQueryと、それを利用する画像スライダ、jquery.bxslider を設置してもうまく動作しません。
スライダの「送り」や「戻り」をクリックすると、「ファイルがありません」という404エラーのような表示になります。
理由をいろいろ考えたのですが、どうも戻り処理（？）がうまくないような気がします。

まず、通常のHTMLで、Aタグなどにより移動先がある場合、そのリンクにマウスカーソルをホバーの状態で置くと、リンク先の情報などがブラウザの下部（Firefoxだとステータスバー）に表示されると思います。

ところが、jQueryと、jquery.bxslider によって作られた移動先部分にマウスをホバーさせても、そのページがあるディレクトリを示すのみで、どこに移動しているのか判りません。

この場合設置先は、http://8-dai.com/jQuery/になるのですが、スライダーの＜にマウスを置くと、設置URLそのものがステータスバーに表示されます。

この場合、例えばスライダーの「送り」や「戻り」が選択された という情報は、どこに格納されて送られているのでしょうか？

予想として、この戻りURLがディレクトリまでしか表示していないため、ヤフートリプルのサーバでは、どこに戻したら良いのかがわからず、不明になっているのではないかと思っています。
この部分で、戻るファイルまで指定できれば、エラーが回避出来るのではないかと思うのですが…

よろしくお願いいたします。

Answer 1

サンプルのhttp://8-dai.com/jQuery/では、正常に動作しているようですが・・・

確かに、jquery.bxslider.jsの内部を見ると、populatePager()の処理で

<div class="bx-pager-item"><a href="" data-slide-index="0" class="bx-pager-link">1</a></div>

と、href="" （ここでは、http://8-dai.com/jQuery/）にリンクしているように見えます。
しかしながら、このa要素にクリックイベントをバインドして、そのイベントハンドラ内にe.preventDefault();として、その後の通常のイベント「http://8-dai.com/jQuery/へのリンクをクリック」はキャンセルされています。
この、サンプルでは、エラーが再現できないのでここまでしかわかりません。

しかし、

ヤフートリプルに限って、「ファイルがありません」という404エラーのような表示

という問題がある以上、イベントの伝搬はキャンセルされていないことから、全くの推論ですが、bxスライダーのある部分よりも、DOM上の先祖階層に何かあるとしか思えません。
ブラウザのF12開発者モードか何かで、このヤフートリプル環境でのDOM上の先祖階層を確認すれば、もしかしたら何かわかるかもしれません。

---

もし、このイベントの伝搬が原因なら、以下のスクリプトを試してみてください。

onSliderLoad : function() {
    timeout_id = setTimeout(null, 10000);
    // bxsliderのスライドロードイベントに追加
    $(".bx-wrapper").on("click", function(e) {
        e.stopPropagation();
    });
},

Comments

[ky_46]

ありがとうございます。
https://www.facebook.com/kazuhiro.yoshikawa.54/videos/vb.100002017851641/929554980455088/?type=2&theater&notif_t=video_processed

上記のスクリプトを組み込んだ結果の動画です。
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
onSliderLoad : function() {
timeout_id = setTimeout(null, 10000);
// bxsliderのスライドロードイベントに追加
$(".bx-wrapper").on("click", function(e) {
e.stopPropagation();
});
},
});
});
</script>

にて組み込んだところ、動画のような動作になりました。
つまり、スライドボタンの何処かをクリックすると、一瞬その動画に飛ぶものの、すぐに1枚目に返ってきます。
どうも、リロードをかけたのと同じになっているようです。

</html><!-- text below generated by geocities.jp --></object></layer></div></span></style></noscript></table></script></applet><link href="http://bc.geocities.yahoo.co.jp/js/no.css" rel="stylesheet" type="text/css"><script language="javascript">var jps=2080250412;var jpt=1451052605</script><script language="javascript" src="http://bc.geocities.yahoo.co.jp/js/no.js"></script><script language="javascript" src="http://bc.geocities.yahoo.co.jp/js/geov2.js"></script><script language="javascript">geovisit();</script><script language="javascript" src="http://bc.geocities.yahoo.co.jp/js/sc.js"></script><script language="javascript">var geocities_triple_ref="";</script><script language="javascript">divSb();</script>

ページソースを表示すると、このような妙なHTMLタグが付随しますし、shopping.geocities.jpの特性なのかもしれませんが、なんとかして希望のスライダを設置したいと思っています。

[blackonyx]

`http://bc.geocities.yahoo.co.jp/js/sc.js`の中にa要素のクリックイベントに対する記述があるようです。

[ky_46]

ありがとうございます。

for( i = 0; i < maxElm; i += 1){
if($a[i].href.indexOf('http') === 0 || $a[i].href.indexOf('//') === 0){
YAHOO.JP.lib.addEvent( $a[i] ,'click', function(event){
self.check(this, option.bouncerURL, option.regexpArray, option.exceptionURL, urlParams);
YAHOO.JP.lib.preventDefault(event);
});
}
}

この部分の事だと思いますが、あっていますか？

内容にはあまり詳しくありませんが、preventDefaultでAタグのイベントがキャンセルされているという事でしょうか？

[blackonyx]

それ以前に、同じAタグにイベントが複数登録されていることが、予期せぬ動作につながっているということだと思います。

Answer 2

初めまして
まずboxsliderの最小構成ですが、
bxSliderのページに書いてあるとおり

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

このようなhtmlを用意し

$('.bxslider').bxSlider();

をjavascriptで実行すると横並びのsliderが完成します。
なのでその構成を守りつつ、imgタグのsrc属性にちゃんと画像への参照パスが入っていれば問題無いです。
ここもsrc="/aaaaa"なのかsrc="aaaaa"なのかで変わってくるのでそちらもご確認下さい。

また、もしそれでも治らない場合は
エラー内容の詳細
・imgタグに指定している参照パスが間違っているのか
・bxsliderの実行ができてないのか（横並びになってないかいるか）

を教えていただけると嬉しいです。
一番検証しやすいのはそのバグがでているurlを貼っていただけるとすぐに検証できます。

よろしくお願い致します！

Comments

[ky_46]

すみません。言葉が足らないか、キャプチャ画像が判りにくかったようで、誤解を与えてしまいました。

スライダーそのものは、正常に動作し、画像をクリックすると、希望の跳び先へジャンプします。

ただ、スライダをコントロールする上記画像の赤丸部分をクリックすると、ヤフートリプルに限って、「ファイルがありません」という404エラーのような表示になります。

ちなみに、まったく同じbxSliderを持つページは、別のサーバーですと正常に動作します。質問のURLでも正常です。

質問の内容は、スライダーの制御部分をクリックしたとき、何処へ飛ぼうとしているのか？という事になります。
ブラウザの表示では、そのファイルのあるディレクトリまでしか指していないので、ここがサーバーの設定によってはうまく拾えず、ファイルが見つからないとなってしまうのではないか？　と推測しております。