在 fancyBox 3 中框住图像答案

【问题标题】：Frame around image in fancyBox 3在 fancyBox 3 中框住图像
【发布时间】：2017-02-28 10:18:45
【问题描述】：

如何在 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 中找不到任何相关信息。

【问题讨论】：

我不知道获得好的结果有多容易，因为图像以多种尺寸显示。您会考虑在 Photoshop 中添加白框吗？
我不认为 Photoshop 是一个好的选择。将框架添加到大图像，而不是缩略图，也会导致不太好的过渡。我不想在缩略图中添加框架。
抱歉，目前不可能，因为图像环绕元素是使用 CSS 变换缩放的，任何视觉元素在动画时也会缩放。因此它看起来会变形。
谢谢，@Janis。也许，如果有这个问题的答案：stackoverflow.com/questions/42505524/transitions-in-fancybox-3，这真的不是问题，因为我可以使用另一个转换。你知道吗？

标签： css fancybox fancybox-3

【解决方案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>

【讨论】：

建议通过回调添加框架。不幸的是，它没有帮助。由于在图像完全显示时突然出现框架，因此图像突然变小，从而破坏了过渡。您的示例使用的是 fancyBox2，没有缩放过渡，因此看起来不错。
嗨@MagnarMyrtveit，您可以按照我的js代码和css来获取您的fancy-box版本
我试过了，因为fancyBox 3中的缩放过渡，看起来不太好：/