0

widthFancybox 2のオーバーレイ タイトルの背景を画像の幅に変更するにはどうすればよいですか? 幅を 100%に変更しようとしましCSSたが、これではうまくいきません。.fancybox-title-overlay-wrap

コードは次のとおりです。

.fancybox-title-overlay-wrap {
     width: 100%;
}
4

2 に答える 2

3

widthFancybox タイトルのサイズは動的に計算されるため、いずれにしても値が上書きされるため、css で設定することはできません。widthコールバックを使用して、現在の画像のを計算し、titleそれに応じてサイズを設定する必要があります。

title typeがデフォルトの場合は、次のfloatようなものを使用します。

$(".fancybox").fancybox({
    afterShow: function() {
        var imageWidth = $(".fancybox-image").width();
        $(".fancybox-title-float-wrap .child").css({
            "width": imageWidth
        });
    }
});​

JSFIDDLEを参照してください

一方、 が の場合、title typeもう少しover複雑になりますが、次のようにすることができます。 

$(".fancybox").fancybox({
    helpers: {
        title: {
            type: "over"
        }
    },
    afterShow: function() {
        var imageWidth = $(".fancybox-image").width();
        $(".fancybox-title-over-wrap").css({
            "width": imageWidth,
            "paddingLeft": 0,
            "paddingRight": 0,
            "textAlign": "center"
        });
    }
});​

この他のJSFIDDLEを見る

于 2012-12-07T18:41:57.277 に答える
1

jsFiddle デモ

プラグイン CSS を変更する方法についての質問を目にするたびに、私はすぐに Firefox に目を向けます。これは、独自の CSS ライブ編集機能です。

Fancybox の画像を含む jsFiddle を起動し、Fancybox のタイトル領域にカーソルを合わせ、マウスを右クリックしてInspect Elementを選択します。Inspector Panelが表示されたら、左側から 2 番目のアイコンを押して HTML パネルをポップアップし、Web ページ上の要素の DOM レイアウトを確認します。

.fancybox-titleここでは、一般的なタイトル領域に、対象となる要素としてclassname が表示されます。次に、黒のタイトル バーの視覚的な幅を変更しないことを除いて、そのスタイルに追加の属性を追加します。width 100%

ただし、spanクラス名が の実際のタイトル テキストに が表示されますchild。Inspectまた、値を指定すると100%、タイトル バーの全幅が実現されますが93%、曲線の黒い角が視覚的な幅全体に追加されるため、パーセントではるかに良く見えます。

テキストが長すぎると、Fancybox のフルwidthタイトル エリアの外側を超えていることがわかります。次に、 2 つの設定が必要であることを理解しました。93% widthこれをオンに変更.fancybox-titleするautoと、2 番目の設定はforセレクターmin-widthの値です。93%.fancybox-title .child

CSS:

.fancybox-title {
  width: 100%;
}

.fancybox-title .child {
  width: auto;    /* Here we define width as auto, so it's always the correct size for overflowing Title text. */
  min-width: 93%; /* When text is not flowing over, the black Title bar is 93% of Fancybox width. */
}

バグのある特定の CSS の問題については、Firefox 3D Viewを使用します。これにより、ステージを回転およびズームし、CSS をレイヤーとして選択できます。右側にそのボタンが表示されます。

于 2013-01-07T08:29:28.613 に答える