Fancybox 3 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.

<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>

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