发表新帖
发表新帖

HTML Attribute rel Errors using fancyBox

后端 未结
关注
6 941
青春惊慌失措
青春惊慌失措 2020-11-28 11:25

I\'m using fancyBox to create a gallery with the following code:
相关标签:
6条回答
  • 半阙折子戏
    2020-11-28 11:47

    How do I fix this issue?

    You don't need to. The range of values that the validator accepts for the rel attribute is limited.

    Obviously Fancybox makes use of that attribute in a way that the validator does not appreciate, so it issues a warning an error; but this does not have to concern you.

    Am I not writing the code out correctly?

    Yes, you are.

    0 讨论(0)
  • 你的背包
    2020-11-28 11:55

    How do I fix this issue?

    You rewrite the code so it doesn't try to describe the relationship between the current page and the image with the nonsense term "group1".

    HTML 5 provides the data-* series of attributes for adding data solely for the purpose of JS. There is no need to hijack rel, which has a defined meaning.

    0 讨论(0)
  • 不知归路
    2020-11-28 11:57

    The rel attribute specifies the relationship between the current document and the linked document. The attribute has a limited set of possible values, listed here: http://www.w3schools.com/tags/att_link_rel.asp. Using a non-standard value will cause a validation warning which can only be corrected by changing your rel attribute to a standard value or removing it altogether.

    I'm not quite sure why you have the attribute there, however there are several alternatives that will validate correctly:

    • If you are trying to store information against each item and your website uses the HTML5 doctype then you can use the data-* attribute. Example usage: data-group="1". You can then access the dataset via javascript, see here: http://slides.html5rocks.com/#custom-data
    • If you are trying to access the items in a css selector then you can add "group1" as a second class to the items.
    • If you are trying to access the items via JavaScript and you are not using the XHTML doctype you may alternatively consider setting their name attribute to "group1", then using the getElementsByName('group1') function.
    0 讨论(0)
  • 無奈伤痛
    2020-11-28 11:59

    If you want to have a fancybox gallery within a valid HTML document (just because we are all purists ;) then you need two things:

    1: An HTML5 DOCTYPE

    <!DOCTYPE html>

    2: use the data-fancybox-group attribute rather than the rel attribute like:

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

    That validates!! ... see sample here

    NOTE: this is for fancybox v2.x

    0 讨论(0)
  • 清歌不尽
    2020-11-28 12:02

    If you are still using fancybox v 1.x (which does not support data-fancybox-group) you can easily modify the script a bit.

    You only have to search and replace the "rel" attribute with something else, for instance "data-fancybox-gallery".

    When searching for the string "rel" you will find 4 elements. Be carefull only to change the last 3, because the first "rel" you find is part of position:relative.

    This is the part you have to change:

            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)
        }

    Make it:

            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)
        }

    And then your code should be:

        <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>
    0 讨论(0)
  • 陌清茗
    2020-11-28 12:11

    You are getting the validation error because the rel attribute has a list of values that it is expecting (see http://www.w3schools.com/html5/att_a_rel.asp).

    There is nothing you can do to fix this, Fancybox is using the attribute for a purpose for which is was not intended. There's nothing wrong with that. Web pages don't have to be 100% 'valid'.

    0 讨论(0)
 看不清?
提交回复
热议问题