fancyBox3 change CSS for some slides

Question

I'm trying to remove the fancyBox caption border-top only for some slides that are in the same group. I tried using slideClass option.

<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}

That didn't do anything, so I tried:

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

That hides the caption top border for all slides in the "group". Is there a way to add custom CSS to specific slides in a group?

Answer 1

Simply set different value for other slides. And you have to use beforeShow or afterShow callback, because afterLoad callback is called for every slide. Example:

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

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