6

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

在鼠标悬停或悬停时隐藏图像标题工具提示弹出窗口

当您将鼠标悬停在图像上时，会弹出“标题”属性。我在 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 中修改什么才能使其工作？

4

4 回答 4

6

您确实应该使用 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>
于 2009-09-20T15:07:57.333 回答
1

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

于 2009-07-27T02:31:16.293 回答
0

您可以使用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));
    });
});
于 2009-09-04T07:42:03.910 回答
0

我从以下更改了 Slimbox2 缩小版中的 Q 函数：

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

对此：

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

这样，链接元素中的正常标题被保留，如果链接中的属性名为“data-captionname”，则显示在模式窗口（或灯箱，如果你愿意的话）中。

于 2014-07-10T12:05:10.193 回答