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中修改什么才能使其正常工作？

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

您可以使用参数自定义显示的标题

如果您使用的是压缩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));
    });
});

---

您确实应该使用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>

---

我将精简版Slimbox2中的Q函数改为：

function (Q) { return [Q.href, Q.title] };

为此：

 function (Q) { return [Q.href, $(Q).attr("data-captionname") || Q.title] };

---

这样，link元素中的普通标题就会被保存，如果在模态窗口（或lightbox，如果您愿意的话）中显示的链接中有一个名为“data captionname”的属性，我并不反对任何有效的方法。我该怎么做？Q.title或“title”一词只有一个实例对于这个问题，在slimbox.js脚本中。不知道从这里到哪里去。