Fancybox mit Figcaption-Legenden

Per default nimmt Fancybox 3 die Bildlegende aus der Option data-caption="Bildlegende" und erlaubt keinen formatierten Text. Mittels JQuery lässt sich die Bildlegende aus dem HTML 5 Tag <figcaption> verwenden. Verschachtelte <figure> sind auch möglich. Das in der original Fancybox 3 Dokumentation gezeigte Beispiel ist falsch, da dort der <a> Anchor-Tag das ganze <figcaption> umspannt, was nach validator.w3.org nicht erlaubt ist.

Mit Fancybox 4 wird hierfür eine Javascript API angeboten. Das Beispiel gibt den Wert des Attributes data-caption zurück, falls kein figure+figcaption existiert.

HTML

<figure>
    <a href="/path/to/fullsize-picture.jpg" data-fancybox="fig">
        <img src="/path/to/thumbnail.jpg" width="100" height="100" alt="Picture" />
    </a>
    <figcaption>
        HTML formatierte Bildlegende mit <a href="#">Hyperlink.</a>.
    </figcaption>
</figure>

Fancybox 3 (jQuery)

$('[data-fancybox="fig"]').fancybox({
    caption : function(instance,item) {
        return $(this).closest('figure').find('figcaption').html();
    }
});

Fancybox 4 (JavaScript)

Fancybox.bind('[data-fancybox="fig"]', {
    caption: function (fancybox, carousel, slide) {
        var p = slide.$trigger.parentElement;
        var t = slide.caption;
        if (p.nodeName=="FIGURE" && p.getElementsByTagName('figcaption')) {
            t = p.getElementsByTagName('figcaption')[0].innerHTML;
        }
        return(t);
    },
});