jquery - ファンシーボックスの閉じるボタンにHTMLを挿入する

Question

ファンシーボックスの閉じるボタンに画像の代わりにhtmlを使用したいと思います。

これが私がうまくいくと思うものです：

$('.fancybox-media').fancybox({
    afterLoad : function() {
        $('div.fancybox-close').html('X');
    }
});

ここでは閉じるボタンに注目してください。これが機能しない理由はありますか？

Answer 1

fancybox v2.x の場合、オプションを使用して、tpl好きな html を設定できます

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" id="myCloseID ">[CLOSE]</div>'
 }
});

この例では、独自のセレクターid="myCloseID "をcloseコンテナー ( closeBtn) に設定しているので、次のように独自の CSS スタイルを新しい html に追加できることに注意してください。

#myCloseID {
 position: absolute; /* this is important */
 z-index: 8040; /* this is important */
 top: -18px; /* or whatever needed */
 right: -10px;
 width: 50px; /* or whatever needed */
 height: 36px;
 cursor: pointer;
 color : #ff0034; /* or whatever needed */
 /* etc. */
}

最終的には、独自の html でデフォルトtplを使用することを好む場合があります。closeBtn

$(".fancybox").fancybox({
 tpl: {
  closeBtn: '<div title="Close" class="fancybox-item fancybox-close">[my closing html]</div>'
 }
});

...そして、CSSのように背景画像を削除するだけです

.fancybox-close {
 background-image: none; /* prevents the use of the fancybox sprite */
 color : #ff0034; /* or whatever needed, etc. */
 /* etc. */
}

Answer 2

background動作するはずですが、 を に設定する必要もありますnone。

これを試して：

$('div.fancybox-close').html('X').css({background:'none',color:'white'});

Answer 3

これを試してください

$('.fancybox-close').html('X').css({background:'none',color:'white'});