Javascript 如何向fancybox-3自定义模板添加div？

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

使用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>',
});

$（'[data fancybox=“gallery”]'）。fancybox({
全屏：假，
幻灯片放映：错误，
自动调整大小：false，
循环：对，
触摸：{
垂直：假，
水平：假
},
拇指：{
自动启动：正确
},
onThumbsShow：函数（实例，当前）{
instance.Thumbs.$grid.appendTo（instance.$refs.inner）；
},
单击外部：“关闭”，
baseTpl：
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'',
});

在一定程度上，我成功地实现了与下图类似的结果：

毕竟，我缺少了图片下方带有文本的div。我曾尝试用作参考，但没有任何好的结果：/

有人知道我在哪里漏掉了重点吗？非常感谢所有可能的帮助

---

展望未来，

您可以仅使用CSS来归档大致相同的设计和布局，请参阅此演示-

---

似乎可以通过

数据属性

向fancybox添加其他内容

首先，在html中使用

data-

属性包装内容：

其次，使用jQuery，使用

afterLoad:function（）{}

在fancybox选项中查找文本并将其添加到变量中。可以使用

.html

将变量插入fancybox模板中的

..

 baseTpl :
'<div class="fancybox-container qv-container" role="dialog" tabindex="-1">' +
....
'<div class="fancybox-div"></div>'+
....
'</div>',
afterLoad: function() {
    var content = $(this.opts.$orig[0]).data('content'); 
    $(".fancybox-div").html(content);
}

baseTpl：
'' +
....
''+
....
'',
后加载：函数（）{
var content=$（this.opts.$orig[0]）.data（'content'）；
$（“.fancybox div”）.html（内容）；
}

非常感谢您的回答。您是否可以说使用

data caption=“text”

是向灯箱添加文本的唯一方法？图像下方的文本应类似于库描述，不会因当前图像而改变。似乎

baseTpl:

禁止播放

标题

。您知道是否可以从HTML中查找div并将其附加到

baseTpl:

；类似于

++'+''+内容+'+

？我不理解你的问题，但是关于fancyBox的90%的问题可以简单地通过“使用回调”来回答

 baseTpl :
'<div class="fancybox-container qv-container" role="dialog" tabindex="-1">' +
....
'<div class="fancybox-div"></div>'+
....
'</div>',
afterLoad: function() {
    var content = $(this.opts.$orig[0]).data('content'); 
    $(".fancybox-div").html(content);
}