0

如何将widthFancybox 2 中的覆盖标题背景更改为图像宽度？我试图CSS将.fancybox-title-overlay-wrap宽度更改为 100%，但这并不好。

这是代码：

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

2 回答 2

3

Fancybox title's size is calculated dynamically so you cannot set the width with css because the value will be overwritten anyways. You would need to calculate the the width of the current image and set the title size accordingly, using a callback.

If the title type is the default float, then use something like :

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

See JSFIDDLE

On the other hand, if the title type is over, then it's a bit more complex but you could do : 

$(".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"
        });
    }
});​

See this other JSFIDDLE

于 2012-12-07T18:41:57.277 回答
1

jsFiddle 演示

每当我看到有关如何修改插件 CSS 的问题时，我都会迅速转向 Firefox，它具有独特的 CSS 实时编辑功能。

启动一个带有 Fancybox 图像的 jsFiddle，我将鼠标悬停在 Fancybox Title 区域，然后单击鼠标右键选择Inspect Element。一旦我看到Inspector Panel，然后按左侧的第二个图标以弹出 HTML 面板以查看网页上元素的 DOM 布局。

在这里，在一般标题区域中，我确实将类名.fancybox-title视为要定位的元素。然后我为该样式添加了一个额外的属性width 100%，除了它没有改变黑色标题栏的视觉宽度。

但是，我确实看到一个span带有实际标题文本的类名为child. 我Inspect也给它一个值，100%并且实现了标题栏的整个宽度，但是在百分比上看起来要好得多，93%因为弯曲的黑色角增加了整体视觉宽度。

然后注意到，当文本太长时，它超出了 Fancybox 完整width标题区域。然后我明白需要两个设置。我将其更改为93% width，第二个设置是for选择器的值。.fancybox-titleautomin-width93%.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 回答