在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”的屬性（或者如果您願意，則為燈箱）。