V3 的 Fancybox V2 CSS答案

【问题标题】：Fancybox V2 CSS for V3V3 的 Fancybox V2 CSS
【发布时间】：2018-11-13 22:09:24
【问题描述】：

我正在尝试将使用 Fancybox V2.5 的项目迁移到 V3，但它需要保留原始外观。

如何让右上角的圆圈中的原始 X 以及圆角、阴影等其他选项在 V3 中工作？

【问题讨论】：

【解决方案1】：

您可以简单地使用回调添加其他元素，然后使用 v2 中的 css sn-ps 来设置样式，例如：

$('[data-fancybox="images"]').fancybox({
  toolbar  : false,
  smallBtn : false,
  arrows   : false,
  idleTime : false,
  loop     : true,
  transitionEffect : false,
  animationDuration : 333,
  afterLoad : function(instance, slide) {
    $('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;" data-fancybox-close></a><a title="Previous" class="fancybox-item fancybox-nav fancybox-prev" href="javascript:;" data-fancybox-prev><span></span></a><a title="Next" class="fancybox-item fancybox-nav fancybox-next" href="javascript:;" data-fancybox-next><span></span></a>').appendTo( slide.$content );
  }
});

演示 - https://codepen.io/fancyapps/full/ePYNZo

【讨论】：

谢谢。但是旧花式盒子皮肤的圆角不见了？ iframe 应该应用于哪个元素？
由于 iframe (.fancybox-iframe) 覆盖了整个父元素 (.fancybox-content) 并且两者都可以具有背景颜色，因此您必须为这两个元素设置边框半径。