使用FancyBox 2.0时，如何从标题标签隐藏悬停工具提示? [英] How do I hide the tooltip on hover from the title tag when using FancyBox 2.0?

问题描述

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

I'm using the new version of FancyBox 2.0. Here's a demo of the development site: http://ab.basikgroup.com/exhibition_works/61

在该文档之后，我正在通过链接标签中的标题"属性传递灯箱的标题信息.我的字幕信息很长，并且其中包含一些HTML.因此，当用户将鼠标悬停在图片上时，我想隐藏默认的工具提示.

Following that documentation I'm passing caption information for my lightbox via the Title attribute in my link tag. My caption information is quite long and has some HTML in it. So I want to hide the default tooltip from showing it when a user rolls over the image.

我已经找到了一些很好的例子.例如: 删除标题标签工具提示

I've found some great examples of how to do this. For example: Remove title tag tooltip

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

My problem is that when I use this method (which is removing the title attribute on hover then replacing it when you aren't hovering over the link), but if you actually click on the image to load the lightbox, the title doesn't get passed into FancyBox. I tried writing a JQuery function that tested hover and click but couldn't get it to work.

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

Any advice or help would be greatly appreciated.

推荐答案

更新[2016年3月4日]

这是旧帖子，接受的答案当时适用于该版本.使用当前版本(v2.1.5)，它是一种更清洁的解决方案，不需要任何额外的HTML容器，因此，使用回调都不会在锚点中使用特殊的data-fancybox-title，例如:

This is an old post and the accepted answer was valid for the version at that time. With the current version (v2.1.5) a cleaner solution without needing any extra HTML container, neither the use of callbacks would be using the special data-fancybox-title in your anchor like:

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

然后使用简单的fancybox初始化，不需要像这样的回调:

And then use a simple fancybox initialization, no callbacks required for this effect like:

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

请参见 JSFIDDLE

See JSFIDDLE

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

You could even use HTML tags inside the attribute like:

<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

See updated JSFIDDLE

一种不错的方法是将供fancybox使用的title而不是title属性...放置在隐藏的div中，例如紧接在锚点之后，例如:

An elegant way to do it is to store the title to be used by fancybox somewhere else rather than the title attribute ... in a hidden div for instance just right after the anchor like:

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

通过这种方式，您可能(或根本没有)不同于花哨的框title的tooltip.此外，您还会忘记添加或删除来回添加title属性值的额外javascript(您只会添加CPU负载).

In this way, you may have (or not at all) a different tooltip than the fancybox title. Also you forget about the extra javascript of adding or removing back and forth the value of the title attribute (you only would be adding CPU load instead).

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

This is also useful for long or complex captions that include links as in the example above.

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

Then your fancybox script should look like:

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

注意:唯一的条件是带有title的div应该跟随每个锚点，否则.next()方法将失败.您可以自定义脚本，尽管可以从代码的其他位置获取标题，而不管它紧靠在锚点之后，例如获取标题ID.

NOTE: the only condition is that the div with the title should follow every anchor, otherwise the .next() method will fail. You may customize the script though to get the caption from elsewhere in your code regardless if it is right after or not the anchor, getting the caption ID for instance:

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

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

UPDATE (15 June 2012): If using v2.0.6+ you should use beforeShow instead of afterLoad callback option.

这篇关于使用FancyBox 2.0时，如何从标题标签隐藏悬停工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！