jquery - 使用 FancyBox 2.0 时，如何隐藏标题标签上悬停时的工具提示？

Question

我正在使用新版本的 FancyBox 2.0。这是开发站点的演示:http://ab.basikgroup.com/exhibition_works/61

根据该文档，我通过链接标记中的 Title 属性传递灯箱的标题信息。我的标题信息很长，其中包含一些 HTML。因此，我想隐藏默认工具提示，使其在用户将鼠标悬停在图像上时不显示。

我发现了一些关于如何做到这一点的很好的例子。例如: Remove title tag tooltip

我的问题是，当我使用此方法时(即删除悬停时的标题属性，然后在您未将鼠标悬停在链接上时替换它)，但如果您实际单击图像来加载灯箱，则标题不会传递到 FancyBox 中。我尝试编写一个 JQuery 函数来测试悬停和单击，但无法使其工作。

任何建议或帮助将不胜感激。

Answer 1

更新 [2016 年 3 月 4 日]

这是一篇旧帖子，接受的答案对于当时的版本有效。当前版本(v2.1.5)是一个更干净的解决方案，不需要任何额外的 HTML 容器，回调的使用都不会在 anchor 中使用特殊的 data-fancybox-title ，例如:

<a data-fancybox-title="This title doesn't show on hover" class="fancybox" href="path/img01.jpg">open image in fancybox</a>

然后使用简单的 fancybox 初始化，无需回调即可实现此效果，例如:

$(".fancybox").fancybox();

参见JSFIDDLE

您甚至可以在属性内使用 HTML 标签，例如:

<a rel="gallery" data-fancybox-title="This is <span style='color:#ff0000'>title</span> No. 1" class="fancybox" href="path/img01.jpg">open image</a>

查看更新 JSFIDDLE

<小时/>

原始答案:

一种优雅的方法是将 fancybox 使用的 title 存储在其他地方，而不是存储在隐藏的 div 中的 title 属性... 例如就在 anchor 之后，例如:

<a class="fancybox" href="images/01.jpg" title="only show this on hover"><img src="images/01t.jpg"  /></a>
<div class="newTitle" style="display: none;"><p>hello, visite my site <a href="http://fancyapps.com/fancybox/">http://fancyapps.com/fancybox/</a></p></div>

通过这种方式，您可能拥有(或根本没有)与 fancybox title 不同的 tooltip。此外，您还忘记了来回添加或删除 title 属性值的额外 JavaScript(您只会添加 CPU 负载)。

这对于包含链接的长或复杂标题也很有用，如上例所示。

那么你的 fancybox 脚本应该如下所示:

$(document).ready(function() {
 $(".fancybox").fancybox({
  afterLoad: function(){
   this.title = $(this.element).next('.newTitle').html();
  },
  helpers: {
   title : {
    type : 'inside'
   }
  }
 }); // fancybox
}); // ready

注意:唯一的条件是带有 title 的 div 应该跟在每个 anchor 后面，否则 .next() 方法将会失败。您可以自定义脚本，以便从代码中的其他位置获取标题，无论它是否位于 anchor 之后，例如获取标题 ID:

this.title = $('#myCaption').html();

更新(2012 年 6 月 15 日):如果使用 v2.0.6+，您应该使用 beforeShow 而不是 afterLoad 回调选项。