Javascript 如何使用fancybox-3插件将.fancybox拇指插入.fancybox内部？

我正在使用带有自定义模板的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>'

});

$（）.fancybox({
选择器：“[data fancybox=“images”]”，
动画效果：“淡入淡出”，
动画持续时间：330，
过渡效果：“幻灯片”，
拇指：是的，
全屏：假，
幻灯片放映：错误，
循环：对，
触摸：{
垂直：假，
水平：假
},
拇指：{
自动启动：正确
},
单击外部：“关闭”，
baseTpl：
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
});

DOM看起来仍然像：

我正在尝试将

..

插入

..

以使DOM与开发工具中的DOM相同：

我试过各种版本的

$（.fancybox thumbs”）.appendTo（.fancybox-inner）但没有任何结果：/

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

展望未来，您有两个选择：

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

2） 使用回调执行一些操作，例如：

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

演示-
非常感谢@Janis，您建议的回拨已经成功了。