的fancybox 2的jsfiddle解釋

在http://jsfiddle.net/vkDcG/的的jsfiddle顯示的fancybox 2具有的fancybox 2的jsfiddle解釋

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     beforeLoad: function() { 
      this.title = $(this.element).attr('caption'); 
     } 
    });

有人能解釋beforeLoad功能？這是一個fancybox的東西，一個阿賈克斯的東西？這裏發生了什麼事？

感謝您的任何幫助。

來源

2014-07-02 Steve

短的答案：

的rel屬性指定當前文檔與所鏈接的文檔（這意味着該rel屬性在大多使用的「連接」元素如<a>，<area>和<link>標記）之間的關係

龍答：

儘管你其實可以設置爲rel屬性的任何值（如提及的jsfiddle）有有效值（非規範）列表，你可以在http://www.w3.org/TR/html5/links.html#linkTypes

找到根據您的DOCTYPE，一個HTML驗證器會顯示爲錯誤/警告任何rel屬性與無效值值（雖然在HTML 4.01和HTML5之間存在一些差異）。

另一方面，如果您使用rel屬性創建fancybox圖庫（如在jsfiddle中的代碼中），那麼您的文檔將無法驗證。

如果你希望你的文件是有效的，仍然有一個的fancybox的畫廊，則不要使用rel屬性，但在特殊的（HTML5）data-fancybox-group屬性...所以你可以這樣做，而不是：

$(".fancybox") 
    .attr('data-fancybox-group', 'gallery') 
    .fancybox({ 
     beforeLoad: function() { 
      this.title = $(this.element).attr('caption'); 
     } 
});

見JSFIDDLE

有關更多信息，請https://stackoverflow.com/a/9037826/1055987

EDIT：

的beforeLoad功能是加載的fancybox內容之前被執行（如它的名字一樣）一個回調函數。

是的，它是一個fancybox的東西，你可以執行任何JavaScript代碼（你想/需要）在回調內。

有關JavaScript回調的更多信息，您可以閱讀this post

來源

2014-07-02 23:14:33 JFK

完美！非常感謝。 – Steve

的fancybox 2的jsfiddle解釋

回答

相關問題