Fancybox：添加標題和其他東西

我想知道如何添加標題（例如標題或鏈接）到fancybox。我知道，如果我添加標題=「Bla」，它會顯示在框中。但是，如果我在圖片鏈接中添加了caption =「Blabla」之類的東西，我需要在jquery.fancybox.js中使用哪些代碼來提取該標題標籤？Fancybox：添加標題和其他東西

來源

2012-09-10 Jean

[Fancybox 2 Custom Titles and Captions \ [from A（title）and IMG（alt \]]）可能的重複（http://stackoverflow.com/questions/9058442/fancybox-2-custom-titles-and-字幕 - 從 - atitle和imgalt） – Ankur

由於您可以在自己定製的fancybox腳本中添加此選項，因此您不需要與原始jquery.fancybox.js文件混淆。

如果您正在使用HTML5 DOCTYPE，你可以爲你添加字幕，所以你可以有這個HTML使用data-*屬性：

<a class="fancybox" href="images/01.jpg" data-caption="This is the caption" >Open fancybox</a>

再設置自定義的fancybox腳本，並使用了beforeShow回調像

得到 data-caption

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = $(this.element).data("caption"); 
    } 
}); 
}); // ready

這將覆蓋title並使用data-caption來代替。

在另一方面，你可能要保持title屬性和建設的fancybox的title結合兩種，title和data-caption屬性的話，這個HTML

<a class="fancybox" href="images/01.jpg" title="This is the title" data-caption="This is the caption">Open fancybox</a>

使用該腳本

$(document).ready(function() { 
$('.fancybox').fancybox({ 
    beforeShow : function(){ 
    this.title = this.title + " - " + $(this.element).data("caption"); 
    } 
}); 
}); // ready

此外，您還可以從文檔中的其他HTML元素（例如<div>）獲取caption/title，該文檔可以包含鏈接或其他呃HTML元素。檢查這些職位代碼示例：https://stackoverflow.com/a/9611664/1055987和https://stackoverflow.com/a/8425900/1055987

注意：這是對的fancybox v2.0.6 +

來源

2012-09-10 18:29:05 JFK

謝謝，這有很大的幫助！ – Jean

完美的優雅的解決方案。謝謝！ –

@JFK有沒有辦法保持/舉行說明可見？在我的environmet，字幕消失後秒 –

老問題，但由於肯尼迪的答案，我發現，隨着fancybox最新版本即可只需在title=""屬性中輸入一個值即可添加標題（默認情況下）。只要確保它包含在fancybox類的<a>元素中。

來源

2014-11-19 22:23:22

謝謝，這是我第一次閱讀包括它的鏈接。 – tehlivi

很高興我可以幫助@tehlivi –

這應該現在是一個收到答案。不幸的是，OP是M.I.A.自2013年起。 – Mike

Fancybox：添加標題和其他東西

回答

相關問題