使用FancyBox 2.0时,如何在悬停标题标签时隐藏工具提示？

Question

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

根据该文档,我通过链接标记中的Title属性传递灯箱的标题信息.我的标题信息很长,并且里面有一些HTML.因此,当用户滚动图像时,我想隐藏默认工具提示.

我找到了一些如何做到这一点的好例子.例如: 删除标题标记工具提示

我的问题是当我使用这种方法时(在悬停时删除title属性然后在没有悬停在链接上时替换它),但是如果你实际点击图像加载灯箱,则标题不会传递给FancyBox.我尝试编写一个测试悬停和点击的JQuery函数但无法使其工作.

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

Answer 1

更新[2016年3月4日]

这是一篇旧帖子,接受的答案对当时的版本有效.使用当前版本(v2.1.5)一个更干净的解决方案而不需要任何额外的HTML容器,回调的使用都不会使用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

原始答案:

一个优雅的方法是将titlefancybox用于其他地方,而不是title属性...在隐藏中div,例如紧跟在锚之后:

<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>

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

这对于包含上述示例中的链接的长标题或复杂标题也很有用.

然后您的fancybox脚本应如下所示:

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

注意:唯一的条件是divwith title应该跟随每个锚点,否则.next()方法将失败.您可以自定义脚本以从代码中的其他位置获取标题,无论它是否在锚点之后,获取标题ID,例如:

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

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