HTML Attribute rel Errors using fancyBox

I'm using fancyBox to create a gallery with the following code:

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

But I'm getting errors while validating the code. It says:

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

How do I fix this issue? Am I not writing the code out correctly? I basically wanted one thumbnail, with 3 photos to scroll through.

Thank you.

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

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.

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>

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'.

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.

HTML Attribute rel Errors using fancyBox

Related

Recent Posts