Come sostituire i controlli predefiniti con i pulsanti personalizzati in Fancybox 2.1.5?

Question

In Fancybox 2.1.5 Voglio sostituire i controlli predefiniti con i miei pulsanti personalizzati (nuovi pulsanti preloader + close/next/prev su sprite).

Non so come regolare correttamente il codice css. Ho provato a modificare il codice CSS as follows, ma c'è qualcosa che non va, l'icona 'successiva' appare nell'angolo in alto a destra invece del pulsante 'Chiudi'.

È possibile vedere il mio codice su this gist.

Answer 1

Non c'è bisogno di pasticciare con il file CSS originale, utilizzare l'opzione tpl API invece come

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

Avviso che ho aggiunto la classe myClose in modo da poter impostare le proprie specifiche proprietà CSS, immagine di sfondo , ecc come

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

Vedi JSFIDDLE tanto per fare un esempio.

Fare lo stesso per le icone prev/next. Controlla il API documentation (search for tpl)