Как заменить стандартные элементы управления пользовательскими кнопками в Fancybox 2.1.5?

Question

В Fancybox 2.1.5 Я хочу заменить элементы управления по умолчанию на свои пользовательские кнопки (новые кнопки preloader + close/next/prev на спрайте).

Я не уверен, как правильно отрегулировать код css. Я попытался изменить CSS as follows, но что-то не так, значок «next» появляется в верхнем правом углу вместо кнопки «закрыть».

Вы можете увидеть мой код на this gist.

Answer 1

Нет необходимости возиться с исходным файлом CSS, используйте опцию tpl API вместо как

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

Обратите внимание, что я добавил класс myClose, так что я могу установить его собственные конкретные CSS свойства, фоновое изображение и т.д., как

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

См JSFIDDLE только в качестве примера.

Сделайте то же самое для превью/следующих значков. Проверьте API documentation (search for tpl)