HTML屬性使用的fancybox

相對錯誤我用的fancybox創建具有下面的代碼庫：HTML屬性使用的fancybox

<a class="fancybox" rel="group1" href="img/work/1.jpg"></a> 
<a class="fancybox" rel="group1" href="img/work/2.jpg"></a> 
<a class="fancybox" rel="group1" href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>

但我發現了錯誤，同時驗證碼。它說：

Bad value group1 for attribute rel on element a: Keyword group1 is not registered.

我該如何解決這個問題？我沒有正確寫出代碼嗎？我基本上想要一個縮略圖，3張照片滾動瀏覽。

謝謝。

來源

2012-01-27 mapr

如果你想有一個有效的HTML文件（只是因爲我們都是純粹主義者;）內的fancybox的畫廊，那麼你需要兩樣東西：

1：一個HTML5 DOCTYPE

<!DOCTYPE html>

2：使用data-fancybox-group屬性而不是rel屬性等：

<a class="fancybox" data-fancybox-group="group1" href="img/work/1.jpg"></a>

即驗證！ ......看到sample here

注意：這是對的fancybox V2.X

來源

2012-01-27 17:57:56 JFK

哇，完美。這工作！謝謝JFK。 – mapr 2012-01-27 18:17:03

+1非常好的解決方案。 – Tomalak 2012-01-27 18:49:17

非常有用，謝謝！ – 2013-01-03 20:29:25

如何解決此問題？

你不需要。驗證程序接受的rel屬性的值範圍有限。

很明顯，Fancybox以驗證器不讚賞的方式使用該屬性，因此它發出警告錯誤;但這不必關心你。

我沒有正確寫出代碼嗎？

是的，你是。

來源

2012-01-27 16:59:35 Tomalak

這是一個錯誤，而不是警告。 – Quentin 2012-01-27 17:05:27

@Quentin：哦，我明白了。你可以爭辯說，可以忽略它而不冒無辜的小貓的生命。 ;）但我明白這不是有效的HTML，並且有更好的方法來解決這個特定的問題（但插件作者可能沒有想到這些方法）。 – Tomalak 2012-01-27 17:07:07

這是你得到的錯誤，fancybox不工作？或者這只是一個驗證程序，給你的錯誤？ – 2012-01-27 17:29:07

如何解決此問題？

您重寫了代碼，因此它不會嘗試用無意義術語「group1」來描述當前頁面和圖像之間的關係。

HTML 5提供了data-*系列屬性，用於僅爲JS的目的添加數據。沒有必要劫持rel，它有一個確定的含義。

來源

2012-01-27 17:03:30 Quentin

這不就是說重寫jQuery插件嗎？是的，乾淨的解決方案，但有點不切實際。（我不知道該插件，但是，如果他們有什麼好處，他們已經支持'data- *'屬性。） – Tomalak 2012-01-27 17:05:50

@Tomalak - 對插件應該是一個非常簡單的編輯。 – Quentin 2012-01-27 17:06:39

是的，那裏沒有任何爭論。 :) – Tomalak 2012-01-27 17:09:48

您正在收到驗證錯誤，因爲rel屬性有一個預期的值列表（請參閱http://www.w3schools.com/html5/att_a_rel.asp）。

沒有什麼可以解決這個問題的，Fancybox將這個屬性用於其目的不是其目的。這沒什麼錯。網頁不必100％'有效'。

來源

2012-01-27 17:04:21

+1不需要純粹;） – JFK 2012-01-27 17:41:14

你可以做點什麼 - 看到接受的答案：http://stackoverflow.com/a/9037826/221381 – 2016-02-25 15:25:43

rel屬性指定當前文檔和鏈接文檔之間的關係。屬性具有一組有限的可能值，在此處列出：http://www.w3schools.com/tags/att_link_rel.asp。使用非標準值將導致驗證警告，只能通過將rel屬性更改爲標準值或將其完全刪除來糾正。

我不明白爲什麼你有沒有屬性，但是有幾個備選方案，將正確驗證：

如果你想對存儲每個項目的信息和您的網站使用HTML5的DOCTYPE那麼你可以使用data- *屬性。用法示例：data-group =「1」。然後，您可以通過javascript訪問數據集，請參見：http://slides.html5rocks.com/#custom-data
如果您嘗試訪問css選擇器中的項目，則可以將「group1」作爲第二個類添加到項目中。
如果您嘗試通過JavaScript訪問項目並且未使用XHTML文檔類型，則可以考慮將其名稱屬性設置爲「group1」，然後使用getElementsByName（'group1'）函數。

來源

2012-01-27 17:17:25 lpd

如果你還在使用的fancybox v 1.x的（不支持數據的fancybox組），您可以輕鬆地修改腳本一點。

您只需搜索並用別的東西替換「rel」屬性，例如「data-fancybox-gallery」。

當搜索字符串「rel」時，您會發現4個元素。請注意只能更改最後3個，因爲您找到的第一個「rel」是位置的一部分：rel ative。

這是一部分，你必須改變：

 var c = a(this).attr("rel") || ""; 
     if (!c || c == "" || c === "nofollow") { 
      n.push(this) 
     } else { 
      n = a("a[rel=" + c + "], area[rel=" + c + "]"); 
      l = n.index(this) 
     }

讓它：

 var c = a(this).attr("data-fancybox-gallery") || ""; 
     if (!c || c == "" || c === "nofollow") { 
      n.push(this) 
     } else { 
      n = a("a[data-fancybox-gallery=" + c + "], area[data-fancybox-gallery=" + c + "]"); 
      l = n.index(this) 
     }

然後你的代碼應該是：

<a class="fancybox" data-fancybox-gallery="group1" href="img/work/1.jpg"></a> 
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/2.jpg"></a> 
    <a class="fancybox" data-fancybox-gallery="group1" href="img/work/3.jpg"><img src="img/th/thumb.jpg" alt="Thumb" /></a>

來源

2012-09-27 16:45:31

謝謝。節省我的時間。 – gokhan 2015-02-25 13:52:34

HTML屬性使用的fancybox

回答

相關問題