fancybox-3プラグインを使って.fancybox-innerを.fancybox-innerに挿入するにはどうすればいいですか？

Question

私は、カスタムテンプレートでfancybox-3プラグインを使用しています：私は、DOMは開発ツールのように同じに見えるように<div class="fancybox-inner">...</div>に<div class="fancybox-thumbs">...</div>を挿入しようとしています

：よう

$().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を探しています：

は私が$(".fancybox-thumbs").appendTo(".fancybox-inner");が、なしのさまざまなバージョンを試してみました結果：/

誰かがポイントを逃していることを知っていますか？すべての可能な助けに感謝します。今後

、

Answer 1

次の2つのオプションがあります。

1）は、カスタムサムネイルのモジュールを作成するか、既存のものを編集します。

2）いくつかの操作を行うには、コールバックを使用して、例：

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

デモ - https://codepen.io/anon/pen/yzJXRV?editors=1010