如何将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 作为参考，但没有得到令人满意的结果 :/

有人知道我哪里错了吗？非常感谢所有可能的帮助。

期待您的回复，

- o.O

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;
}

- Janis

---

非常感谢您的回答。您能否说一下，使用 data-caption="text" 是添加文本到灯箱的唯一方法吗？图像下方的文本应该像画廊描述一样，并且不会根据当前图像而改变。 - o.O

似乎 baseTpl : 禁止对 caption 进行操作。您知道是否可以在 HTML 中查找并附加 div 到 baseTpl : 中吗？类似于 +'<div id="' + someID + '" class="class-name">' + content + '</div>'+ 的方式。 - o.O

我不理解你的问题，但是关于fancyBox的90%的问题都可以简单地回答为“只需使用回调函数”。 - Janis

Answer 2

看起来可以通过 data-attributes 向 fancybox 添加附加内容;

首先，在 html 中使用 data- 属性包装内容：

<a href="images/img.jpg" class="gallery-img" data-content="lorem ipsum bla bla bla" data-fancybox="images" style="background-image: url('images/img.jpg')"></a>

其次，使用 jQuery 在 fancybox 选项中找到并添加文本到变量中，使用 afterLoad: function() {}。变量可以使用 .html 插入到 fancybox 模板内的 <div>...</div> 中。

 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);
}

- o.O