Question

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

这是代码：

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

Answer 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

在Fancybox 2中更改叠加标题背景宽度

1 个答案: