在Slimbox中隐藏图像标题

Question

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

隐藏图像标题工具提示弹出鼠标滚动或悬停

将鼠标悬停在图像上时,会弹出"标题"属性.我在Slimbox的图像标题中需要HTML.因此,当然,当您悬停时,"标题"属性会显示所有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中修改哪些才能使其工作？

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>

Answer 2

出于可访问性的目的，我会单独保留 title 属性，并修改 slimbox.js 以在页面加载时立即读取 title 属性，将其存储在自定义属性（称为“标题”或其他内容）中，然后以编程方式删除 title 属性以防止工具提示。当然，这意味着引用 title 属性的其余代码需要更改为使用自定义属性。