<h2>fancybox v3.5 - Customized caption</h2>

<p>Example of appending image numbering.</p>

<hr class="my-5" />

<p class="imglist">

  <a href="https://source.unsplash.com/IvfoDk30JnI/1500x1000" data-fancybox="images" data-caption="Hello, World!">
      <img src="https://source.unsplash.com/IvfoDk30JnI/240x160" />
  </a>

  <a href="https://source.unsplash.com/0JYgd2QuMfw/1500x1000" data-fancybox="images" data-caption="Another great image">
      <img src="https://source.unsplash.com/0JYgd2QuMfw/240x160" />
  </a>

  <a href="https://source.unsplash.com/xAgvgQpYsf4/1500x1000" data-fancybox="images">
      <img src="https://source.unsplash.com/xAgvgQpYsf4/240x160" />
  </a>

</p>

$( '[data-fancybox="images"]' ).fancybox({
  infobar : false,
  caption : function( instance, item ) {
    var caption = $(this).data('caption') || '';
    
    return ( caption.length ? caption + '<br />' : '' ) + 'Image <span data-fancybox-index></span> of <span data-fancybox-count></span>';
  }
});