Tag HTML rel

Question

Sto provando a convalidare il mio documento HTML5 con w3c. Sto usando il plugin jQuery fancybox per semplici light box e gallerie di immagini. Al fine di differenziare tra ogni galleria di immagini sto usando il tag rel.

Quando ho convalidare la mia pagina ottengo il seguente errore:

Bad value gallery for attribute rel on element a: Not an absolute IRI. The string gallery is not a registered keyword or absolute URL.

Qui è il mio codice:

<div class="portItem"> 
    <div class="thumbs"> 
     <div class="items"> 
     <img src="images/rsl.jpg" class="col" alt="A website for R.S.Lynch and Company"/> 
     <div class="caption"> 
      <a class="fancybox" rel="gallery1" href="images/rs1.jpg">R.S.Lynch & Company</a> 
      <div class="hidden"> 
      <a class="fancybox" rel="gallery1" href="images/rs2.jpg"></a> 
      <a class="fancybox" rel="gallery1" href="images/rs3.jpg"></a> 
      <a class="fancybox" rel="gallery1" href="images/rs4.jpg"></a> 
      <a class="fancybox" rel="gallery1" href="images/rs5.jpg"></a> 
      </div> 
     </div> 
     </div> 
    </div> 
</div> 

C'è un tag meglio usare e ottenere lo stesso risultato? Grazie

Answer 1

Io suggerirei usando data attribuire -Family qui, in questo modo:

<a class="fancybox" data-gallery="1" href="images/rs1.jpg">R.S.Lynch & Company</a> 
<a class="fancybox" data-gallery="1" href="images/rs2.jpg">...</a> 
<a class="fancybox" data-gallery="1" href="images/rs3.jpg">...</a> 
<a class="fancybox" data-gallery="1" href="images/rs4.jpg">...</a> 
<a class="fancybox" data-gallery="1" href="images/rs5.jpg">...</a> 

... in quanto questo tipo di attributo è stato progettato specificamente per il collegamento di alcuni dati agli elementi DOM. È più semantico dell'uso di class, secondo me.

È possibile accedere facilmente a questi valori con la sintassi $('some selector').data('gallery').

Come per l'attributo rel, sembra in HTML5 è limitato al set di attributes predefinito e viene utilizzato per definire più relazioni di alto livello tra documenti.

Answer 2

Si potrebbe aggiungere una classe per ogni galleria invece: class="fancybox gallery1"

Answer 3

<a class="fancybox" data-gallery="1" href="images/img1.jpg">...</a> 
<a class="fancybox" data-gallery="1" href="images/img2.jpg">...</a> 

$ ("fancybox"). Attr ('rel', 'data-gallery') fancybox()..;