Znacznik HTML rel:

Question

Próbuję sprawdzić mój dokument HTML5 za pomocą w3c. Korzystam z wtyczki jQuery fancybox dla prostych light boxów i galerii zdjęć. W celu rozróżnienia każdej galerii obrazów używam tagu rel.

Kiedy potwierdzić moją stronę pojawia się następujący błąd:

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

Tu jest mój kodu:

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

czy istnieje lepszy tag w użyciu i uzyskać ten sam wynik? Dzięki

Answer 1

Sugerowałbym użyciu data -family przypisują tutaj, podobnie jak to:

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

... jak ten typ atrybutu było zaprojektowane specjalnie do dołączania niektórych danych do elementów DOM. Jest to bardziej semantyczne niż użycie class, według mnie.

Możesz łatwo uzyskać dostęp do tych wartości za pomocą składni $('some selector').data('gallery').

Jeśli chodzi o atrybut rel, wygląda na to, że w HTML5 jest on ograniczony do zestawu wstępnie zdefiniowanych attributes i jest używany do definiowania wyższych relacji między dokumentami.

Answer 2

Można dodać klasę dla każdego galerii Zamiast: 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();