En una entrada anterior vimos como podíamos insertar una galería de imágenes con prettyphoto, una vez que tenemos funcionando la galería si validamos nuestra página web con el famosa validador W3C entonces nos encontramos con que nos da error el atributo «rel» que pusimos dentro de los enlaces para que funcionase. Si lo que queremos es solucionar estos errores debemos seguir los siguientes pasos:

Primero debemos cambiar en todos los enlaces donde pusimos rel por «data-rel» dejandolo de la siguiente forma:

<a href="imagenes/coche1.jpg" data-rel="prettyPhoto[pp_gal]" title="Mi coche 1"><img src="imagenes/coche1_peque.jpg" width="300" height="200" alt=""/></a>
<a href="imagenes/coche2.jpg" data-rel="prettyPhoto[pp_gal]" title="Mi coche 2"><img src="imagenes/coche2_peque.jpg" width="300" height="200" alt=""/></a>
<a href="imagenes/coche3.jpg" data-rel="prettyPhoto[pp_gal]" title="Mi coche 3"><img src="imagenes/coche3_peque.jpg" width="300" height="200" alt=""/></a>

A continuación debermos modificar la inicializacion del prettyphot que poniamos al final de la pagina y cambiar tambien el rel por data-rel, dejandolo:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[data-rel^='prettyPhoto']").prettyPhoto();
  });
</script>

Y por último lo que es un poco mas complicado, debemos editar el fichero jquery.prettyphot.js, en este caso hemos elegido este en lugar del min porque es más fácil su edición. En las primeras líneas pone hook: ‘rel’,  que sustituiremos por hook: ‘data-rel’, bastante mas abajo nos encontramos con otras líneas que pone:

(getParam('rel',pp_images[set_position])) ? movie+="?rel="+getParam('rel',pp_images[set_position]) : movie+="?rel=1";

Susituimos todos los ‘rel’ por ‘data-rel’ y quedaria:

(getParam('data-rel',pp_images[set_position])) ? movie+="?rel="+getParam('data-rel',pp_images[set_position]) : movie+="?rel=1";

Con esto ya tendríamos solucionado el error que nos da el W3C y podemos volver a validar nuestra web.