Question

我的问题很像这个解决过的帖子，除了我正在使用Slimbox 2：

Hide Image Title Tool Tip Popup on Mouse Rollover or Hover

将鼠标悬停在图像上时，会弹出“标题”属性。我在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中查看图像时，标题名称根本没有出现，标题也没有出现。它应该是空白的。

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

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

这样，链接元素中的普通标题是预先设定的，如果是一个名为＆＃34; data-captionname＆＃34;的属性。在模态窗口中显示的链接（如果你愿意的话，还是灯箱）。

在Slimbox中隐藏图像标题

4 个答案: