在Slimbox中隐藏图像标题

Question

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

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

当您将鼠标悬停在图像上时，会弹出"Title“属性。我需要在我的图像标题在Slimbox的HTML。因此，当然，当您悬停时，"Title“属性会显示所有HTML代码。当你在Slimbox中查看图像时，代码工作得很好，所以没有问题。我只需要隐藏/修改Title属性，以不显示此HTML代码。

我尝试将slimbox.js中的Q.title更改为其他名称(如captionname)。然后将HTML更改为call for：

<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的默认行为，它使用您的超链接的标题属性作为框的标题

这样，您可以使用任何标准属性，例如'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属性，将其存储在自定义属性(称为"caption“或其他属性)中，然后通过编程方式删除title属性以防止工具提示。当然，这意味着引用title属性的其余代码需要更改为使用自定义属性。

Answer 3

您可以使用linkMapper参数来自定义所显示的标题。

如果你使用的是slimbox2.js压缩包，你会有一个自动加载的代码，所以你可以按照Josh Stodola的解释来修改它：

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
jQuery(function($) {
    $("a[rel^='lightbox']").each(function(){
        //Set caption and remove title attributes
        this.caption = this.title;
    }).slimbox({/* Put custom options here */}, function(el){
            //Custom linkMapper to grab the description from the caption attribute
            return return [el.href, el.caption];
        }), function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
});