在 Fancybox 2 中更改覆盖标题背景宽度答案

【问题标题】：Change overlay title background width in Fancybox 2在 Fancybox 2 中更改覆盖标题背景宽度
【发布时间】：2012-12-07 15:50:41
【问题描述】：

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

代码如下：

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

【问题讨论】：

任何示例、代码或链接都会有所帮助。
说实话，我从未见过.fancybox-title-overlay-wrap 选择器：我错过了什么吗？

标签： jquery jquery-plugins fancybox fancybox-2

【解决方案1】：

Fancybox 标题的大小是动态计算的，因此您不能使用 css 设置 width，因为无论如何该值都会被覆盖。您需要计算当前图像的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

【讨论】：

+1 很好的答案！我总是喜欢使用回调来进行自定义 CSS 修改，它允许原始 Fancybox 标题栏在需要时按预期运行。我喜欢你的第二把小提琴作为标题栏覆盖......很好！这是你的first jsFiddle 调整。干杯！

【解决方案2】：

jsFiddle DEMO

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

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

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

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

然后注意到，当文本太长时，它超出了 Fancybox full width 标题区域之外。然后我明白需要两个设置。我将.fancybox-title 上的93% width 更改为auto，第二个设置是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 视图，它允许您旋转和缩放舞台，以选择CSS 作为层。您会在右侧看到该按钮。

【讨论】：