fancyBox中的轉換3

Question

是否可以指定在fancyBox 3中使用哪種轉換？有3個轉變我很感興趣：幻燈片之間

1. 打開幻燈片/畫廊
2. 導航
3. 關閉幻燈片/畫廊

默認情況下，3的fancybox使用針對不同類型的不同轉換的內容。

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

看看這個看到它在行動，包括導航過渡。對於圖片，我們有：

1. 放大
2. 幻燈片水平
3. 縮小

HTML內容有：

1. 淡入
2. 幻燈片水平
3. 淡出

是否有可能在fancyBox 3中更改此默認行爲？例如讓圖像淡入淡出？我無法在documentation中找到關於此的任何信息。

Answer 1

從fancyBox版本3.1.20開始，這可以通過選項animationEffect和transitionEffect進行。你可以找到文件here。

Answer 2

不知道如果我得到這個權利...但如果你想淡出&了圖片（在每個轉換之間），你可以通過使用一些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 11b的速度：

// Animation duration in ms 
speed : 100 

免責聲明：我只是一個凡人，這是不是最巧妙的解決方案，但工作對我來說（：