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

합니다. 그룹의 특정 슬라이드에 사용자 정의 CSS를 추가하는 방법이 있습니까?

Answer 1

다른 슬라이드에는 다른 값을 설정하십시오. afterLoad 콜백은 모든 슬라이드에 대해 호출되기 때문에 beforeShow 또는 afterShow 콜백을 사용해야합니다. 예 :

$("[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