validation error on prettyPhoto's rel attribute

Question

It is looks like W3C's validator return a validation error on prettyPhoto's rel attribute for HTML5 pages. How do I solve this error?

Bad value prettyPhoto[gallery1] for attribute rel on element a: Keyword prettyphoto[gallery1] is not registered.

Many thanks!

Answer 1

Using rel attribute with non-proposed (thus not allowed) values not valid for HTML5 markup. Value prettyPhoto is not in the list of proposed values. So you may face the difficulties with getting your web-page with image gallery passing validation.

A Possible Solution:

1. Open jquery.prettyPhoto.js (presumably non-minified one) and perform find & replace function of your text-editor:
   
   replace all occurrences of attr('rel') with attr('data-gal').

2. In your gallery code use:
   
   data-gal="prettyPhoto[galname]"
   
   instead of:
   
   rel="prettyPhoto[galname]"

3. Initialize your prettyPhoto with:
   
   jQuery("a[data-gal^='prettyPhoto']").prettyPhoto();
   
   And you are on the right way for getting your code valid!

You can also read this article with this possible solution.

Answer 2

You can use the (undocumented) hook setting as mentioned in the comments here.

Specify your links like this: <a href="img.jpg" data-gal="prettyPhoto[gal]"></a> and use $("a[data-gal^='prettyPhoto'").prettyPhoto({hook: 'data-gal'}); to initialize prettyPhoto.

Answer 3

You can also fix it by updating the settings to use the class hook:

s = jQuery.extend({
        ...
        hook: "rel",
        animation_speed: "fast",
        ajaxcallback: function() {},
        slideshow: 5e3,
        autoplay_slideshow: false,
        opacity: .8,
        ...

to:

s = jQuery.extend({
        ...
        hook: "class",
        ...