gpt4 book ai didi

javascript - 如何使用 fancybox-3 插件将 .fancybox-thumbs 插入 .fancybox-inner?

转载 作者:太空宇宙 更新时间:2023-11-04 08:10:31 27 4
gpt4 key购买 nike

我正在使用带有自定义模板的 fancybox-3 插件:

  $().fancybox({
selector : '[data-fancybox="images"]',
animationEffect : "fade",
animationDuration : 330,
transitionEffect : 'slide',
thumbs : true,
fullScreen : false,
slideShow : false,
loop:true,

touch : {
vertical : false,
horizontal : false
},

thumbs : {
autoStart : true
},

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 class="fancybox-stage"></div>' +
'</div>' +
'</div>'

});

DOM 仍然是这样的: enter image description here

我正在尝试插入 <div class="fancybox-thumbs">...</div>进入<div class="fancybox-inner">...</div>让 DOM 看起来像在开发工具中一样:

enter image description here

我试过各种版本的$(".fancybox-thumbs").appendTo(".fancybox-inner");但没有任何结果:/

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

期待,

最佳答案

你有两个选择:

1) 创建自定义缩略图模块或编辑现有的;

2) 使用回调做一些操作,例如:

$('[data-fancybox]').fancybox({
onThumbsShow : function(instance, current) {
instance.Thumbs.$grid.appendTo( instance.$refs.inner );
}
});

演示 - https://codepen.io/anon/pen/yzJXRV?editors=1010

关于javascript - 如何使用 fancybox-3 插件将 .fancybox-thumbs 插入 .fancybox-inner?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46328662/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com