在花式盒子 2.x 中显示/隐藏标题不可靠

Show/hide title unreliable in FancyBox 2.x

本文关键字：显示 隐藏 标题 不可靠 盒子      更新时间：2023-09-26

试图在Fancybox 2中实现显示标题助手的一致行为。我希望当鼠标指针位于花哨的框窗口(元素内部(上时显示标题 div.fancybox-wrap - 只是并且仅。

尝试使用用户 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浏览器中不起作用。当鼠标指针位于图像的侧面(左或右(并单击用于在图库中显示上一个或下一个时，标题将隐藏在新图像上 - 直到指针移动一点。

知道如何让它在铬/铬中工作吗？在火狐中没关系。

更新：当使用光标键调用下一个/上一个图像时，标题也保持隐藏状态，而鼠标指针仍在.fancybox-wrap内。也无法在铬/铬中工作。

更新 2：我可以模拟所需的行为钩子而不是悬停而是鼠标悬停事件，但它具有已知的令人不快的副作用，它在进入/离开每个内部元素时会触发。

您可以跟踪鼠标位置，然后使用它来确定鼠标当前是否悬停 - 这不需要触发悬停事件(如果鼠标不移动，显然不会触发(。

var lastMouseX,
    lastMouseY;
$(document).on("mousemove", function (e) {
    lastMouseX = e.pageX;
    lastMouseY = e.pageY;
});
$(".fancybox").fancybox({
    helpers: {
        title: {
            type: 'over'
        }
    },
    afterShow: function () {
        $(".fancybox-wrap").hover(function () {
            $(".fancybox-title").stop(true, true).slideDown(200);
        }, function () {
            $(".fancybox-title").stop(true, true).slideUp(200);
        });
        var fancyBoxWrap = $(".fancybox-wrap");
        var divTop = fancyBoxWrap.offset().top;
        var divLeft = fancyBoxWrap.offset().left;
        var divRight = divLeft + fancyBoxWrap.width();
        var divBottom = divTop + fancyBoxWrap.height();
        var currentlyHovering = lastMouseX >= divLeft && lastMouseX <= divRight &&
                                lastMouseY >= divTop && lastMouseY <= divBottom;
        if (currentlyHovering ) {
            $(".fancybox-title").stop(true, true).slideDown(200);
        } else {
            $(".fancybox-title").hide();
        }
    }
});

摆弄 http://jsfiddle.net/lhoeppner/8m4FD/

我对这篇文章的原始答案进行了一些调整。

基本上有两个问题：

1(. 这一行(在afterShow回调中(：

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

无论鼠标是否hover，总是在afterShow回调中首先触发。解决方法是在决定是否隐藏title之前验证鼠标是否hovering fancybox 容器

： 
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(包装花哨的盒子包装器(，以便我们可以播放 IE8 的切换类解决方法

-

2(. 我在第二个.hover()方法中验证鼠标hover状态，这是多余的(并且有错误且令人困惑(，所以我在第一个.hover()用于显示/隐藏鼠标hover title的方法中移动了 setTimeout/clearTimeout 函数。

这是完整的代码(出于文档目的，我决定将原始代码注释掉(：

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

现在，您可以使用花哨的导航箭头(单击时(或键盘箭头在库中导航。如果(如果只是(鼠标的指针hover花哨的框，则会显示title。

它似乎在Firefox，Chrome，Opera，Safari和(当然(IE中始终如一地工作。

相关文章：