Wie können Standardeinstellungen durch benutzerdefinierte Schaltflächen in Fancybox 2.1.5 ersetzt werden?

Question

In Fancybox 2.1.5 Ich möchte die Standardsteuerelemente durch meine benutzerdefinierten Tasten ersetzen (neue Preloader + schließen/next/prev Tasten auf Sprite).

Ich bin mir nicht sicher, wie man den css-Code richtig justiert. Ich habe versucht, das CSS as follows zu ändern, aber etwas stimmt nicht, das "nächste" Symbol erscheint in der oberen rechten Ecke statt der Schaltfläche "Schließen".

Sie können meinen Code auf this gist sehen.

Answer 1

Keine Notwendigkeit zu Chaos mit der ursprünglichen CSS-Datei, verwenden Sie die tpl API-Option statt wie

$(".fancybox").fancybox({ 
    tpl: { 
     closeBtn: '<a title="Close" class="fancybox-item fancybox-close myClose" href="javascript:;"></a>' 
    } 
}); 

Hinweis, dass ich die Klasse hinzugefügt myClose so kann ich sein eigene spezifische CSS-Eigenschaften, Hintergrundbild festlegen usw. wie

.myClose { 
    height: 50px; 
    width: 50px; 
    background: #ff0000; 
} 

Siehe JSFIDDLE nur als Beispiel.

Machen Sie dasselbe für die vorherigen/nächsten Symbole. Überprüfen Sie die API documentation (search for tpl)