Search code examples
jqueryfancyboxjquery-animateeasing

Fancybox 2.0 easing and animation

Is it possible to have some examples on how to use nextEasing and prevEasing parameters with fancybox 2.0? If I add the easing plugin 1.3 and then I use easing animation value like easeInCubic nothing happens. How to achieve new types of transition.

I would also like to have with this new version 2.0 the same effect of resizing/adapting frame I had with the previous version 1.3.4 when I slide from a picture to another.

$("a.image").fancybox({
    arrows   : true,
    loop       : false,
    openEffect : 'none',
    closeEffect: 'none',
    prevEffect : 'fade',
    nextEffect : 'fade',
    prevEasing : 'easeInCubic',
    nextEasing : 'easeInCubic',
});
Solution

  • I was trying to use the easing option, but I didn't find the doc to have all the allowed values on fancybox website, all I could find was:

    Easing method for each transition type. You have numerous choices if easing plugin is included
    String; Default value: 'swing'

    If I try to use the value 'easeInCubic', I can see in the Javascript console of my browser:

    Uncaught TypeError: Object #<Object> has no method 'easeInCubic' jquery-latest.min.js:6

    Not sure if it was your case too, but you need to make sure to include/activate the easing plugin, which is not part of fancy box, by adding this

    <!-- Easing plugin -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" />

    At the top of my HTML solved the Javascripts errors. Having a look at this demo shows what does each value. The difference between the default value and easeInCubic isn't very big.

    That said, for what you want to achieve, this option doesn't seem to be the good one, you can find an example with this demo, which seems much more appropriate.