Add arrows to fancybox in responsive with data-attributed initialized fancybox

Question

I make use of Fancybox 3 which is very cool, only one thing that bothers my client is that there is no visual indication in the responsive version of the box that you can swipe to go to the next pictures.

Now I see on the fancybox doc page that you can afterload and add content that way:

afterLoad : function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    }

But I don't make use of the fancybox intialized via javascript, but directly via html attributes. How can I make sure to add something to the fancybox?

Answer 1

You can, for example, edit default settings:

$.fancybox.defaults.afterLoad = function( instance, current ) {
    if ( instance.group.length > 1 && current.$content ) {
      current.$content.append('<div class="swipeto">Swipe to change pictures</div>');
    };
};

Answer 2

I solved it this way, I made some changes to the CSS file of fancybox, to show the controls when on responsive:

@media (max-width: 800px){

.fancybox-button--left, .fancybox-button--right, .fancybox-buttons button:not(.fancybox-button--close) {
    display: inline-block!important;
}