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

请尝试以下操作可能会对您有所帮助。

＆＃13;

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

＆＃13;

.fancybox-placeholder {
  background: #fff;
}

.fancybox-image {
  position: static;
}

＆＃13;

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

＆＃13;

在fancyBox 3中的图像周围的框架

1 个答案: