fancyBox 3의 이미지 주변 프레임

Question

fancyBox 3의 이미지 슬라이드 주변에 프레임을 추가하려면 어떻게해야합니까?

현재, 나는 다음과 같이 시도했다 :

보고 슬라이드를 탐색하지만이 fancyBox의 열기/닫기 전환하는 동안 잘 보이지 않을 때 작동

<style> 
    .fancybox-placeholder { 
    padding: 40px; 
    background: #fff; 
    } 
    .fancybox-image { 
    position: static; 
    } 
</style> 
<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> 

.

이 동작은 CodePen에서 볼 수 있습니다.

fancyBox 3에서 프레임을 만드는 더 좋은 방법은 없으므로 슬라이드/갤러리를 열고 닫을 때 모양이 좋아 보이나요? documentation에서 이에 대한 정보를 찾을 수 없었습니다.

Answer 1

다음과 같이 시도해보십시오. 도움이 될 수 있습니다.

$("[data-fancybox]").fancybox({ 
 
    "onComplete": function() { 
 
    console.log('open'); 
 
    $('.fancybox-placeholder').css('padding', '40px'); 
 
    }, 
 
    "beforeClose": function() { 
 
    console.log('close'); 
 
    $('.fancybox-placeholder').css('padding', ''); 
 
    // fancybox is closed, run myOtherFunct() 
 
    } 
 
});

.fancybox-placeholder { 
 
    background: #fff; 
 
} 
 

 
.fancybox-image { 
 
    position: static; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/js/jquery.fancybox.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.6/css/jquery.fancybox.min.css" rel="stylesheet" /> 
 

 
<h1>fancyBox with frame around images</h1> 
 
<p> 
 
    <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" data-fancybox="images"> 
 
    <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" /> 
 
    </a> 
 

 
    <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images"> 
 
    <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" /> 
 
    </a> 
 

 
    <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" data-fancybox="images"> 
 
    <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" /> 
 
    </a> 
 
</p> 
 

 
<p>Click on one of the images to open the fancyBox. As you can see, the white frame around the image is too wide while the thumbnail is zoomed in. When the zooming is done, the frame suddenly gets its correct width.</p> 
 
<p>How can I add a frame around the image in fancyBox 3 while keeping a nice transition? See the CSS for my current attempt.</p>