3

如何在 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 中创建框架，所以在打开和关闭幻灯片/画廊时看起来也不错？我无法在文档中找到这方面的任何信息。

4

1 回答 1

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>

于 2017-02-28T11:13:48.163 回答