Search code examples
javascriptfancyboxfancybox-3

Transitions in fancyBox 3

Is it possible to specify which transition to use in fancyBox 3? There are 3 transitions I'm interested in:

  1. Open slide/gallery
  2. Navigate between slides
  3. Close slide/gallery

By default, fancyBox 3 uses different transitions for different types of content.

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

Look at this codePen to see it in action, including the navigation transitions. For images we have:

  1. Zoom in
  2. Slide horizontally
  3. Zoom out

For html content we have:

  1. Fade in
  2. Slide horizontally
  3. Fade out

Is it possible to change this default behavior in fancyBox 3? For example to let also images fade in and out? I was not able to find any information on this in the documentation.

Solution

  • As of fancyBox version 3.1.20, this is possible through the options animationEffect and transitionEffect. You can find the documentation here.