在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属性的其余代码以使用自定义属性。

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));
    });
});

Answer 4

我改变了Slimbox2的缩小版本中的Q函数：

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

对此：

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

这样，链接元素中的普通标题是预先设置的，并且如果在模式窗口中显示的链接中是名为“data-captionname”的属性（或者如果您愿意，则为灯箱）。