web-dev-qa-db-ja.com

fancyBoxを使用したHTML属性relエラー

私は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.

この問題を修正するにはどうすればよいですか？コードを正しく書き出していないのですか？基本的に、1枚のサムネイルと3枚の写真をスクロールしたかったのです。

ありがとうございました。

jqueryhtmlfancybox
15
kaoscify

有効なHTMLドキュメント内にfancyboxギャラリーを作成したい場合（私たち全員が純粋主義者であるという理由だけで;）、次の2つが必要です。

1：HTML5 DOCTYPE

<!DOCTYPE html>

2：次のようにrel属性ではなくdata-fancybox-group属性を使用します。

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

それは検証します!! ...参照 サンプルはこちら

[〜＃〜]注[〜＃〜]：これはfancyboxv2.x用です

52
JFK

この問題を修正するにはどうすればよいですか？

現在のページと画像の関係を意味のない用語「group1」で記述しようとしないようにコードを書き直します。

HTML 5は、JSの目的のためだけにデータを追加するためのdata-*シリーズの属性を提供します。定義された意味を持つrelをハイジャックする必要はありません。

5
Quentin

まだfancyboxv 1.x（data-fancybox-groupをサポートしていません）を使用している場合は、スクリプトを少し簡単に変更できます。

「rel」属性を検索して、「data-fancybox-gallery」などの他の属性に置き換えるだけです。

文字列「rel」を検索すると、4つの要素が見つかります。最初に見つけた「rel」はposition：rel ativeの一部であるため、最後の3つだけを変更するように注意してください。

これはあなたが変更しなければならない部分です：

        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>
4
Marius Stănescu

Rel属性に期待される値のリストがあるため、検証エラーが発生します（ http://www.w3schools.com/html5/att_a_rel.asp を参照）。

これを修正するためにできることは何もありません。Fancyboxは意図されていない目的で属性を使用しています。それは何も悪いことではありません。 Webページは100％「有効」である必要はありません。

3
Adam Pope

この問題を修正するにはどうすればよいですか？

あなたはする必要はありません。バリデーターがrel属性に対して受け入れる値の範囲は制限されています。

明らかに、Fancyboxはバリデーターが認識しない方法でその属性を利用するため、問題が発生します 警告 エラー;しかし、これはあなたに関係する必要はありません。

コードを正しく書き出していないのですか？

はい、そうです。

1
Tomalak

rel属性は、現在のドキュメントとリンクされたドキュメントの間の関係を指定します。属性には、以下にリストされている可能な値の限定されたセットがあります： http://www.w3schools.com/tags/att_link_rel.asp 。非標準値を使用すると、検証警告が発生します。これは、rel属性を標準値に変更するか、完全に削除することによってのみ修正できます。

なぜそこに属性があるのか​​よくわかりませんが、正しく検証されるいくつかの選択肢があります。

  • 各アイテムに対して情報を保存しようとしていて、WebサイトでHTML5 doctypeが使用されている場合は、data- *属性を使用できます。使用例：data-group = "1"。その後、javascriptを介してデータセットにアクセスできます。ここを参照してください： http://slides.html5rocks.com/#custom-data
  • Cssセレクターのアイテムにアクセスしようとしている場合は、2番目のクラスとして「group1」をアイテムに追加できます。
  • JavaScriptを介してアイテムにアクセスしようとしていて、XHTML doctypeを使用していない場合は、代わりに、名前属性を「group1」に設定してから、getElementsByName（ 'group1'）関数を使用することを検討してください。
0
lpd