How to insert .fancybox-thumbs into .fancybox-inner using fancybox-3 plugin?

Question

I am using fancybox-3 plugin with custom template:

  $().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>'

});

Still DOM is looking like:

I am trying to insert <div class="fancybox-thumbs">...</div> into <div class="fancybox-inner">...</div> to make DOM look same like in dev tools:

I have tried various versions of $(".fancybox-thumbs").appendTo(".fancybox-inner"); but without any results :/

Does anyone know where I am missing the point? Many thanks for all possible help.

Looking forward,

Answer 1

You have two options:

1) Create custom thumbnail module or edit existing one;

2) Use callbacks to do some manipulations, example:

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

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