2

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.

Magnar Myrtveit
  • 2,432
  • 3
  • 30
  • 51
  • There are currently no options to customize transitions. Btw, what exactly you are looking for? You described current scenarios, but you did not say what exactly you want. – Janis Mar 03 '17 at 12:30
  • Thanks, @Janis. I'm most interested in making images fade in and out, instead of zooming. The combination of a few built-in transitions to choose from, in addition to possibility for specifying a custom transition function to use would be optimal. – Magnar Myrtveit Mar 06 '17 at 07:43
  • Sorry, wait for the next releases for that (you can follow the project on twitter, too). – Janis Mar 06 '17 at 09:35

2 Answers2

2

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

Magnar Myrtveit
  • 2,432
  • 3
  • 30
  • 51
0

Not sure if I'm getting this right... but if you want to fade in & out the images (between each transition) you can trick them by using a bit of CSS, add this to your 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;}

And also modify the speed of the jquery.fancybox.js lib to:

// Animation duration in ms
speed : 100

Disclaimer: I'm just a mortal and this is not the neatest solution, but worked for me (:

Linda Castillo
  • 1