javascript - 在 Slimbox 中隐藏图像标题

Question

我的问题很像这个已解决的线程，除了我使用的是 Slimbox 2:

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

当您将鼠标悬停在图像上时，会弹出“标题”属性。我在 Slimbox 的图片标题中需要 HTML。因此，当然，当您悬停时，“标题”属性会显示所有 HTML 代码。当您在 Slimbox 中查看图像时，该代码可以完美运行，因此没有问题。我只需要隐藏/修改 Title 属性以不显示此 HTML 代码。

我试图将 slimbox.js 中的 Q.title 更改为其他内容(如标题名称)。然后更改 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 中查看图像时，标题名称和标题都不会出现。它应该在的地方只是空白。

我需要在 slimbox2.js 中修改什么才能使其正常工作？

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