2

div.fancybox-wrapFancybox 2 でタイトル ヘルパーを表示する一貫した動作を実現しようとしています。マウス ポインターが Fancybox ウィンドウ (要素内) の上にあるときにタイトルを表示したいと思います。

ユーザーJFKの例から次のコードを使用しようとしました:

$(".fancybox").fancybox({
  helpers: {
    title: {
      type: 'over'
    }
  },
  afterShow: function () {
    $(".fancybox-title").hide();
    // shows/hides title on hover
    $(".fancybox-wrap").hover(function () {
      $(".fancybox-title").stop(true, true).slideDown(200);
    }, function () {
      $(".fancybox-title").stop(true, true).slideUp(200);
    });
    // detects if mouse is already hover
    $(".fancybox-outer a, .fancybox-outer img").hover(function () {
      $(this).data('timeout', setTimeout(function () {
        $(".fancybox-title").stop(true, true).slideDown(200);
      }, 100));
    }, function () {
      clearTimeout($(this).data('timeout'));
    });
  }
});

ただし、上記の例は Chromium ブラウザーでは機能しません。マウス ポインターが画像の横 (左または右) にあり、クリックしてギャラリー内の前または次を表示すると、ポインターが少し移動するまで、タイトルが新しいもので非表示になります。

Chrome/Chromiumでも動作させる方法はありますか? Firefox で大丈夫です。

更新:マウス ポインターがまだ 内にあるときに、次/前の画像がカーソル キーで呼び出された場合にも、タイトルは非表示のまま.fancybox-wrapです。Chrome/Chromium でも動作しません。

更新 2:ホバーではなくマウスオーバーイベントをフックする必要な動作をシミュレートできますが、各内部要素に出入りするときにトリガーされる既知の不快な副作用があります。

4

2 に答える 2

1

この投稿の元の回答にいくつかの調整を加えました。

基本的に 2 つの問題がありました。

1)。この行 (afterShowコールバック内):

$(".fancybox-title").hide();

afterShowマウスがあったかどうかに関係なく、コールバック内で常に最初にトリガーしてhoverいました。回避策は、 を非表示にするかどうかを決定する前に、マウスがhoveringfancybox コンテナーであるかどうかを検証することです。title

if ( !$('.fancybox-wrap:hover').length ) {
    // mouse is not hover
    $(".fancybox-title").hide();
}

ただし、:hover疑似クラスは IE8 以下のバージョンでは動作しないようです。クロスブラウザーの互換性を考慮しているため、これらのブラウザーには追加の回避策が必要なので、この変数を追加します

var isIE = navigator.userAgent.match(/msie [6-8]/i);

すべてのブラウザに対して検証します:

if ( !isIE ) {
    if ( !$(".fancybox-wrap:hover").length ) {
        // mouse is not hover
        $(".fancybox-title").hide();
    }
} else {
    $(".fancybox-title").hide();
    $(".fancybox-wrap").wrap("<a id='fancyhover' class='fancyhover' />");
}

#fancyhover.fancyhover(fancybox ラッパーをラップする)要素を追加したことに注意してください。

2)。hover私は2 番目の方法でマウスの状態を検証して.hover()いましたが、これは冗長で (そしてバグが多く、混乱を招きました)、setTimeout/clearTimeout関数をon mouse.hover()の表示/非表示に使用する最初の方法に移動しました。titlehover

完全なコードは次のとおりです (文書化のために、元のコードをコメントアウトしたままにしておくことにしました)。

var isIE = navigator.userAgent.match(/msie [6-8]/i);
jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        helpers: {
            title: {
                type: "over"
            }
        },
        afterShow: function () {
            if ( !isIE ) {
                if ( !$(".fancybox-wrap:hover").length ) {
                    // mouse is not hover
                    $(".fancybox-title").hide();
                }
            } else {
                $(".fancybox-title").hide();
                $(".fancybox-wrap").wrap("<a id='fancyhover' class='fancyhover' />");
            }
            // shows/hides title on hover
            $(".fancybox-wrap").hover(function () {
                //$(".fancybox-title").stop(true,true).slideDown(200);            
                if ( isIE ) {
                    $("#fancyhover").toggleClass("fancyhover");
                    if ( !$("#fancyhover").hasClass("fancyhover") ) {
                        $(".fancybox-title").hide();
                    }
                }
                var $fancyWrap = $(this),
                    $fancyTitle = $fancyWrap.find(".fancybox-title");
                $fancyWrap.data("timeout", setTimeout(function () {
                    $fancyTitle.stop(true, true).slideDown(100);
                }, 200));
            }, function () {
                //$(".fancybox-title").stop(true, true).slideUp(200);
                clearTimeout($(this).data("timeout"));
                $(this).find(".fancybox-title")
                    .stop(true, true)
                    .slideUp(100);
            });
            /*
        // detects if mouse is already hover
        $(".fancybox-outer a, .fancybox-outer img").hover(function () {
            $(this).data('timeout', setTimeout(function () {
                $(".fancybox-title").stop(true, true).slideDown(200);
            }, 100));
        }, function () {
            clearTimeout($(this).data('timeout'));
        });
        */
        }
    });
}); // ready

新しいJSFIDDLEを見る

ファンシーボックスのナビゲーション矢印 (クリック時) またはキーボードの矢印を使用して、ギャラリーをナビゲートできるようになりました。マウスのtitleポインターがファンシーボックスである場合にのみ表示されますhover。

Firefox、Chrome、Opera、Safari、そして (もちろん) IE でも一貫して動作するようです。

于 2013-10-15T21:32:13.543 に答える