Пользовательский заголовок (абзац) Fancybox под изображением при его нажатии

Question

У меня есть вопрос о Fancybox 3, я пытался добавить контейнер с элементами списка под изображением, когда лайтбокс запускается, это не просто заголовок.Я был в Google и проверить пример кода из документации.Самое близкое, что я нашел, это: https://codepen.io/fancyapps/pen/EbyQzE, но заголовок показывает только всплывающее окно изображения, и он всегда придерживается нижней части браузера, над чем я пытался работать, придерживался изображения и показывал все времякогда лайтбокс срабатывает, и я также хочу установить изображение для высоты центра.

HTML

<a href="assets/images/sample.jpg" class="img-container fancybox" data-caption="Sample 1" data-fancybox="sample">
  <img class="lazyload" data-src="/assets/images//sample.jpg" src="assets/images/sample.jpg" alt="sample 1">
</a>

<div class="content">
   <ul>
      <li>Test 1</li>
      <li>Test 2</li>
      <li>Test 3</li>
  </ul>   
</div>

Script

$('[data-fancybox="sample"]').fancybox({
    infobar: true,
    loop: true,
    arrows: true,
    caption: function (instance, item) {
        return $(this).next().html();
        },
    afterLoad : function(instance, current) {
    var pixelRatio = window.devicePixelRatio || 1;

    if ( pixelRatio > 1.5 ) {
    current.width  = current.width  / pixelRatio;
    current.height = current.height / pixelRatio;
    }
    }
});

Я использую CSS для центрирования и стилизации заголовка, но я хочу, чтобы он динамически добавлялся под изображением, а не по размеру / высоте изображения.

Пример кода: https://codepen.io/Madebymt/pen/rPRrNW

Спасибовы так много!