javascript - 如何将div 添加到fancybox-3 自定义模板？

Question

我正在努力实现与上图类似的结果:

使用 fancybox-3 插件我创建了自定义模板:

$('[data-fancybox="gallery"]').fancybox({

fullScreen : false,
slideShow  : false,
autoSize : false,
loop:true,
touch : {
vertical : false,
horizontal : false
},

thumbs : {
autoStart : true
},

onThumbsShow : function(instance, current) {
instance.Thumbs.$grid.appendTo( instance.$refs.inner );
},

clickOutside : 'close',
baseTpl :
'<div class="fancybox-container qv-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<button data-fancybox-prev title="{{PREV}}" class="fancybox-arrow fancybox-arrow--left" />' +
'<button data-fancybox-next title="{{NEXT}}" class="fancybox-arrow fancybox-arrow--right" />' +
'<button data-fancybox-close class="qv-close"></button>' +
'<div data-fancybox-close class="qv-close"></div>' +
'<div></div>' +
'</div>' +
'</div>',
});

部分我已经设法实现了类似于下图中的结果:

毕竟，我缺少图像下方带有文本的 div。我试过使用 codepen example作为引用，但没有任何不错的结果:/

有谁知道我漏掉了重点吗？非常感谢所有可能的帮助。

期待，

Answer 1

您可以仅使用 CSS 归档大致相同的设计和布局，请参阅此演示 - https://codepen.io/anon/pen/qPaNwo

.fancybox-bg {
  background: #fff;
}

.fancybox-stage {
  top: 44px;
  left: 200px;
  right: 320px;
  bottom: 100px;
}

.fancybox-inner {
  right: 0 !important;
}

.fancybox-thumbs {
  top: 44px;
  right: 200px;
  bottom: 44px;
  width: 120px;
  background: transparent;
}

.fancybox-thumbs>ul>li {
  max-width: 100%;
}

.fancybox-caption-wrap {
  padding: 0 200px;
  background: transparent;
}

.fancybox-caption {
  padding: 0;
  border: 0;
  color: #000;
}