如何使用 fancybox-3 插件将 .fancybox-thumbs 插入 .fancybox-inner？答案

【问题标题】：How to insert .fancybox-thumbs into .fancybox-inner using fancybox-3 plugin?如何使用 fancybox-3 插件将 .fancybox-thumbs 插入 .fancybox-inner？
【发布时间】：2017-09-20 17:47:14
【问题描述】：

我正在使用带有自定义模板的 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 看起来像：

我正在尝试将 <div class="fancybox-thumbs">...</div> 插入 <div class="fancybox-inner">...</div> 以使 DOM 在开发工具中看起来像：

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

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

期待，

【问题讨论】：

标签： javascript jquery html css fancybox-3

【解决方案1】：

你有两个选择：

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

2) 使用回调做一些操作，例如：

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

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

【讨论】：

非常感谢@Janis，您建议的回调取得了成功。