如何使用fancybox-3插件將.fancybox-thumbs插入.fancybox-inner？

Question

我使用的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");但沒有各種版本任何結果：/

有沒有人知道我錯在哪裏？非常感謝所有可能的幫助。

展望未來，

Answer 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