jQuery Fancybox für HTML5 valide machen * FiedoMedia

HTML5 erlebt als zukünftiger Standard dank des mobilen Surfens mit Smartphones & Co einen rasanten Aufstieg. Da die aktuellen Browser-Generationen bereits so gut wie alle HTML5 spezifischen Tags darstellen können, gibt es keinen Grund, Webseiten noch mit den alten Standards umzusetzen. Fancybox ist auf Grund seiner leichtgewichtigen und kompakten Art eines der beliebtesten Lightbox-Plugins mit jQuery, um auf einer Website Bilder elegant vergrößert darzustellen. Und Fancybox ist eine von wenigen Lightboxen, die bereits jetzt ohne Eingriff in den Quellcode HTML5 validen Code darstellen kann.

Im speziellen Fall von Lightbox Plugins und HTML5 wird das "rel"-Attribut vom W3C Validator als nicht valide deklariert. Dieses wird jedoch benötigt, um zusammengehörige Bilder in einer Galerie anzuzeigen.

<a title="Mein Ziel-Bild1" rel="gallery1" class="lightbox">
 <img src="meinbild1.jpg" alt="Mein Vorschau-Bild1" />
</a>
<a title="Mein Ziel-Bild2" rel="gallery1" class="lightbox">
 <img src="meinbild2.jpg" alt="Mein Vorschau-Bild2" />
</a>

Das Problem lässt sich aber in Fancybox einfach beheben.

HTML5 erlaubt es, eigene Attribute in HTML-Tags zu erstellen, welchen "data-" vorangestellt werden muss. So hat auch Fancybox sein eigenes Attribut: "data-fancybox-group". Im HTML-Code muss nun rel gegen data-fancybox-group ausgetauscht werden, das Ergebnis sieht dann wie folgt aus:

<a title="Mein Ziel-Bild1" data-fancybox-group="gallery1" class="lightbox">
    <img src="meinbild1.jpg" alt="Mein Vorschau-Bild1" />
</a>
<a title="Mein Ziel-Bild2" data-fancybox-group="gallery1" class="lightbox">
    <img src="meinbild2.jpg" alt="Mein Vorschau-Bild2" />
</a>

zurück zu allen News

Kommentare

Andre 21.11.2013
Antworten
Hallo,
ich habe das gleiche Problem mit der html5 Validierung.
Mich würde interessieren wo genau ich den code abändern muß.

MfG
André
1. Patrick Fiedorowicz 21.11.2013
  Antworten
  Hi André,
  
  du musst nur im HTML-Code den rel="..."-Tag suchen und durch data-fancybox-group="..." ersetzen.
  
  Es sei denn, du benutzt ein CMS, dann müsste man etwas tiefer eingreifen.
  Wenn ja, welches CMS benutzt du?
  
  Schöne Grüße
  Patrick
Andre 21.11.2013
Antworten
Sorry meine Frage bezog sich auf die Typo3 Extension Fancybox
1. Patrick Fiedorowicz 21.11.2013
  Antworten
  Fancybox-Extensions für TYPO3 gibt es mehrere, wie lautet denn der genaue Key der Extension?
  
  Evtl. steht auch in der Extension-Doku etwas dazu, wie man dort den rel-Tag ändern kann.
2. Andre 21.11.2013
  Antworten
  danke für die schnelle Antwort
  
  Ich benutze typo3 Version 4.7.15 und das Plugin sk_fancybox Version 1.0.4 .
  Ich habe auch schon in der Setup Datei en bisschen rumprobiert aber leider ohne Erfolg.
3. Patrick Fiedorowicz 21.11.2013
  Antworten
  Verwendest du die Fancybox für Content-Elemente?
  
  Ich hab mir kurz das Typoscript von sk_fancybox angeschaut, du musst folgendes in dein eigenes Typoscript-SETUP einfügen:
  tt_content.image.20.1.imageLinkWrap.typolink {
  ATagParams = data-fancybox-group="fancybox" class="fancybox"
  ATagParams.override = class="fancybox" data-fancybox-group="fancybox{field:uid}"
  }
  
  Dadurch überschreibst du die Zeilen aus der Extension und es sollte passen.

Kommentare

Neuer Kommentar