2

是否可以指定在 fancyBox 3 中使用的过渡？我对 3 个转换感兴趣：

  1. 打开幻灯片/画廊
  2. 在幻灯片之间导航
  3. 关闭幻灯片/图库

默认情况下，fancyBox 3 对不同类型的内容使用不同的过渡。

<a href="img.jpg" data-fancybox><img src="thumb.jpg"></a> <!--This will zoom in-->
<a data-fancybox href="#html-content">Open</a> <!--This will fade in-->
<div id="html-content" style="display: none;">
  <p>This content does just fades in.</p>
</div>

查看此codePen以了解它的运行情况，包括导航转换。对于图像，我们有：

  1. 放大
  2. 水平滑动
  3. 缩小

对于 html 内容，我们有：

  1. 淡入
  2. 水平滑动
  3. 消退

是否可以在 fancyBox 3 中更改此默认行为？例如让图像也淡入淡出？我无法在文档中找到这方面的任何信息。

4

2 回答 2

2

从 fancyBox 3.1.20 版开始，这可以通过选项animationEffect和transitionEffect. 您可以在此处找到文档。

于 2017-08-30T13:08:32.757 回答
0

不确定我是否正确...但是如果您想淡入淡出图像（在每次转换之间），您可以使用一些 CSS 来欺骗它们，将其添加到您的 jquery.fancybox.css 中：

.fancybox-slide.fancybox-slide--image {
opacity: 0;
-moz-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
transition: all 0.01s ease;}

.fancybox-slide.fancybox-slide--image.fancybox-slide--complete {
opacity: 1!important;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;}

并将 jquery.fancybox.js 库的速度修改为：

// Animation duration in ms
speed : 100

免责声明：我只是一个凡人，这不是最好的解决方案，但对我有用（：

于 2017-03-21T23:51:08.923 回答