Làm cách nào để thay thế các nút điều khiển mặc định bằng các nút tùy chỉnh trong Fancybox 2.1.5?

Question

Trong Fancybox 2.1.5 Tôi muốn thay thế các điều khiển mặc định bằng các nút tùy chỉnh (trình tải trước mới + nút đóng/tiếp theo/trước trên sprite).

Tôi không chắc chắn cách điều chỉnh mã css đúng cách. Tôi đã cố gắng sửa đổi CSS as follows, nhưng có điều gì đó sai, biểu tượng 'tiếp theo' xuất hiện ở góc trên cùng bên phải thay vì nút 'đóng'.

Bạn có thể thấy mã của mình trên this gist.

Answer 1

Không cần phải gây rối với các file CSS gốc, sử dụng tùy chọn tpl API thay vì như

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

Thông báo mà tôi thêm lớp myClose vì vậy tôi có thể thiết lập riêng các thuộc tính CSS đặc biệt, hình nền của nó , vv như

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

Xem JSFIDDLE chỉ là một ví dụ.

Làm tương tự cho các biểu tượng trước/tiếp theo. Kiểm tra API documentation (search for tpl)