fancybox-3 schließen taste deaktivieren/aktivieren verzögerung funktioniert nicht

Question

Ich habe meine fancybox schließen taste diplay: keine; Wenn ein Iframe geöffnet wird, möchte ich, dass die Schaltfläche zum Schließen mit einer Verzögerung von x angezeigt wird. genau so DEMO. Obwohl es in früheren Version der Phantasie-Box in here gelöst ist, aber in fancybox-3 Es funktioniert zum ersten Mal und danach die Schaltfläche schließen wird nicht angezeigt, bis ich die Seite aktualisieren.

Ich verwende den folgenden JS-Code für die Verzögerung:

$(document).ready(function() { 
    setTimeout(function() { 
    $(".fancybox-button--close").show(); 
    }, 5000); 
}); 

Irgendwelche Ideen? Vielen Dank.

Answer 1

Dies ist, wie Sie die Symbolleiste zugreifen können und sie sichtbar machen, wenn nötig:

$('[data-fancybox="images"]').fancybox({ 
    afterShow : function(instance, slide) { 
    setTimeout(function() { 
     instance.$refs.toolbar.show(); 
    }, 3000); 
    } 
}); 

Demo - https://codepen.io/anon/pen/oeWqrJ

Aber, wenn Sie diese kleine Schließen-Schaltfläche wechseln wollen, hier ist ein Beispiel :

$('[data-fancybox]').fancybox({ 
    toolbar : false, 
    smallBtn : true, 
    afterShow : function(instance, slide) { 
    setTimeout(function() { 
     slide.$slide.find('.fancybox-close-small').show(); 
    }, 3000); 
    } 
}); 

Demo - https://codepen.io/anon/pen/oeWqRJ

Grundsätzlich können Sie auf jedes Element entweder von instance.$refs (Sammlung von Verweisen auf Schnittstellenelemente) oder von slide.$slide (übergeordnetes Element des Inhalts) zugreifen.