javascript - 在 Slimbox 中隐藏图片标题

我的问题很像这个已解决的帖子，只不过我使用的是 Slimbox 2：

在鼠标悬停或移入时隐藏图片标题工具提示弹出

当你将鼠标悬停在图像上时，“Title”属性会弹出。我需要在 Slimbox 的图像标题中使用 HTML。因此，当然，当你悬停时，“Title”属性会显示所有 HTML 代码。查看图像时，代码在 Slimbox 中运行得非常好，所以这里没有问题。我只是需要隐藏/修改 Title 属性，使其不显示这些 HTML 代码。

我尝试在 slimbox.js 中将 Q.title 改为其他东西（比如 captionname）。然后修改了 HTML 调用为：

<a href="images/team/large.jpg" title="Joe Smith" captionname="URL" rel="lightbox-team"><img src="images/team/small.jpg" class ="headline" border="1" hspace="2" /></a>

“Joe Smith” 显示为标题，但当你在 Slimbox 中查看图片时，captionname 根本不会出现，标题也不会出现。应该显示的地方就是空白的。

我需要修改 slimbox2.js 的哪些内容才能让它工作？

答案＃1

你确实应该使用 slimbox 的 linkMapper 选项（这是一个可以作为可选参数传递的函数）来覆盖 slimbox 的默认行为，默认行为是使用你的超链接的 title 属性作为框的标题

这样你可以使用任何标准属性，比如 'alt'，或者更好的是使用自定义属性，比如 'slimboxcaption'，以确保没有浏览器会显示其内容；要定义匹配属性，请使用传递给函数的 'el' 节点的 getAttribute 方法

用这个替换你 slimbox .js 文件中默认的 "jQuery(function($)" 调用

jQuery(function($) {
$("a[rel^='lightbox']").slimbox({ /* Put custom options here */ }, function(el) {
        return [el.href, el.getAttribute("slimboxcaption")];
}, function(el) {
  return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
 });
});

然后你可以使用它将任何 HTML 内容传递到框中，同时在用户悬停在链接上时隐藏它

<a href="/myimage.jpg" title="This is my image" slimboxcaption='<h2>Here you can enter html code for your box caption</h2>...' rel="lightbox"><img src="/myimage_small.jpg"/></a>

答案＃2

我会为了可访问性目的保持 title 属性不变，并修改 slimbox.js 在页面加载时立即读取 title 属性，将其存储在一个自定义属性（叫作“caption”或其他名称）中，然后以编程方式移除 title 属性以防止显示工具提示。当然，这意味着其他引用 title 属性的代码也需要更改为使用该自定义属性。