Fancybox 2.1.5 では、デフォルトのコントロールをカスタム ボタン (新しいプリローダー + スプライトの閉じる/次へ/前のボタン) に置き換えたいと考えています。
CSSコードを適切に調整する方法がわかりません。次のようにCSS を変更しようとしましたが、何か問題があり、「閉じる」ボタンの代わりに「次へ」アイコンが右上隅に表示されます。
この gistで私のコードを見ることができます。
元の 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 ドキュメントを確認してください(tpl を検索してください) 。