質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

jQuery表示のリンクの戻り先

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,130

score 94

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

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

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

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

イメージ説明

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

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

サンプルの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();
    });
},

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/25 23:14

    ありがとうございます。
    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の特性なのかもしれませんが、なんとかして希望のスライダを設置したいと思っています。

    キャンセル

  • 2015/12/26 20:05

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

    キャンセル

  • 2016/01/03 14:06

    ありがとうございます。


    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タグのイベントがキャンセルされているという事でしょうか?

    キャンセル

  • 2016/01/03 14:48

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

    キャンセル

0

初めまして
まず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を貼っていただけるとすぐに検証できます。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/12/24 17:33

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

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

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

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る