一些幻灯片的 fancyBox3 更改 CSS

Question

我正在尝试仅为同一组中的某些幻灯片删除 fancyBox 标题 border-top。我尝试使用 slideClass 选项。

<a data-fancybox="group" href="src1.jpg" data-options='{"slideClass" : "noTopBorder"}'></a>
<a data-fancybox="group" href="src2.jpg"></a>

css

.noTopBorder {border-top-style: hidden}

那没有做任何事情，所以我尝试了：

$("[data-fancybox]").fancybox({
    afterLoad: function(slide, item) {
        if ( item.opts.slideClass === 'noTopBorder' ) {
            $('.fancybox-caption').css('border-top', 'hidden');
        }  
    },
});

这会隐藏 "group" 中所有幻灯片的标题顶部边框。有没有办法将自定义 CSS 添加到组中的特定幻灯片？

Answer 1

只需为其他幻灯片设置不同的值。而且您必须使用 beforeShow 或 afterShow 回调，因为每张幻灯片都会调用 afterLoad 回调。示例：

$("[data-fancybox]").fancybox({
    beforeShow: function(slide, item) {
        $('.fancybox-caption').css('border-top-width', item.opts.slideClass === 'blue' ? 0 : '1px');
    }
});

演示 - https://codepen.io/anon/pen/EwPRxV?editors=1010

一些幻灯片的 fancyBox3 更改 CSS

fancyBox3 change CSS for some slides

jquery

fancybox

fancybox-3