Fancybox 2.1.5のカスタムボタンでデフォルトのコントロールを置き換える方法は？

Fancybox 2.1.5では、デフォルトのコントロールをカスタムボタン（スプライトの新しいプリローダ+閉じる/次の/前のボタン）に置き換えたいと思います。Fancybox 2.1.5のカスタムボタンでデフォルトのコントロールを置き換える方法は？

CSSコードを正しく調整する方法がわかりません。 CSS as followsを修正しようとしましたが、何か間違っています。「閉じる」ボタンの代わりに、「右下に」アイコンが表示されます。

私のコードはthis gistです。

出典

2013-08-31 triwo

オリジナルのCSSファイルを台無しにする必要は、代わりに私は、私は、独自の特定のCSSプロパティを設定することができ、クラスmyCloseを追加

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

お知らせ、背景画像のようtpl APIオプションを使用しますなどのような

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

は一例としてJSFIDDLEを参照してください。

前/次のアイコンで同じ操作を行います。確認してくださいAPI documentation (search for tpl)

出典

2013-09-01 08:17:36 JFK

ヒントをお願いします。しかし、この方法はCSSファイルを編集するよりはるかに複雑に見えますが、これは小さくて簡単です。 FancyboxプラグインはPrestashopで使用されます。私はこのために必要なファイルがどこにあるのかわかりません。プレスタッシュテンプレートを変更することは、私の意見ではもっと複雑になります。私はjquery.fancybox.cssファイルを調整しました。これは必要に応じて動作します。例：http://codepad.org/NXqQL6a0。私はここでいくつかの詳細については分かりません： 'margin-top：-22px; margin-left：-22px; （88,89行目） 'と' margin-top：-15px; （137行目） ' - これらの値は元のボタンのサイズにリンクされているのか、それともそれらとは独立していますか？ – triwo

@triwo prestashopがfancyboxを更新することを決めたら、CSSファイルを再度カスタマイズする必要があります。これは元のファイルを混乱させる良い考えではありませんが（それはあなた次第です）、 'tpl'はファイルではありません。カスタムfancybox初期化スクリプトで、 CSSファイルを変更せずに – JFK

私はカスタムfancyboxの初期化スクリプトを試しますが、今はCSSモッズを完成させて、私の質問に答えを出したいと思っています。 – triwo

Fancybox 2.1.5のカスタムボタンでデフォルトのコントロールを置き換える方法は？

答えて

関連する問題