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');
        }  
    },
});

隐藏了＆＃34;组＆＃34;中所有幻灯片的标题顶部边框。有没有办法将自定义CSS添加到组中的特定幻灯片？

Answer 1

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

public Point centroid()  {
    Point center = new Point();
        int sumofx=0,sumofy=0;
        for(int i=0; i<knots.size(); i++) {
        sumofx= sumofx+knot[i].x;
        sumofy=sumofy+knot[i].y;
        }
    center.x=sumofx/knots.size();
    center.y=sumofy/knots.size();
    return center;

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

fancyBox3更改了一些幻灯片的CSS

1 个答案: