Patrick Fiedorowicz |  16.03.2012 | CSS & HTML, jQuery
Fancybox in Aktion

Fancybox in Aktion

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>
  1. Andre Andre 21.11.2013
    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 Patrick Fiedorowicz 21.11.2013
      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
  2. Andre Andre 21.11.2013
    Sorry meine Frage bezog sich auf die Typo3 Extension Fancybox
    1. Patrick Fiedorowicz Patrick Fiedorowicz 21.11.2013
      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 Andre 21.11.2013
      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 Patrick Fiedorowicz 21.11.2013
      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.

Neuen Kommentar schreiben

Deine E-Mail-Adresse wird nicht veröffentlich. Bitte gib Sie an, um dein Gravatar-Bild anzuzeigen.

Zurück zu allen News