单击

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>

脚本

$('[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

非常感谢您！