Fancybox using Figcaption Legends

By default Fancybox 3 uses picture legends from the option data-caption="Bildlegende" and doesn't support HTML formatted text. Using JQuery one can juse the legend from the HTML 5 tag <figcaption>. Nested <figure> are supported. The example shown in the original Fancybox 3 is wrong, because there the <a> anchor tag encloses the whole <figcaption>, which validator.w3.org reports as wrong.

Fancybox 4 provides a Javascript API. The example returns the value of data-caption attribute if no figure+figcaption exists.

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 formatted figure legend with <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);
    },
});