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>
ich habe das gleiche Problem mit der html5 Validierung.
Mich würde interessieren wo genau ich den code abändern muß.
MfG
André