fancyBox 3のフレーム周りのフレーム

Question

fancyBox 3の画像スライド周辺にフレームを追加するにはどうすればよいですか？

現在、私は次のように試してみた：

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

を見て、スライド間を移動するとき、これは動作しますが、それはfancyBoxのオープン/クローズの移行時に良い見ていません。

あなたはこれを実際にこの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>