Fancybox, a custom open transition

Does anyone know how you open a fancyBox with a custom open transition:

I'm looking for a similar jump to the example found here:

I like the show plugin but it lacks some of the functionality I need for fancyBox to do for a new project

Many thanks,



source to share

4 answers

Fancybox can have the same opening effect as in the sample you provided, but not the same closing effect.

To achieve the same opening effect, try this option:

openMethod : 'changeIn'


to keep the same effect while switching between galleries try this option:

nextMethod: 'changeIn'





Add custom transitions -

(function ($, F) {
    F.transitions.dropIn = function() {
        var endPos = F._getPosition(true); = (parseInt(, 10) - 200) + 'px';

            top: '+=200px'
        }, {
            duration: F.current.openSpeed,
            complete: F._afterZoomIn

    F.transitions.dropOut = function() {
            top: '-=200px'
        }, {
            duration: F.current.closeSpeed,
            complete: F._afterZoomOut

}(jQuery, jQuery.fancybox));


Use them like -

    openMethod : 'dropIn',
    openSpeed : 250,

    closeMethod : 'dropOut',
    closeSpeed : 100


And whoa-la - the same effect!



For those reading this now, I wrote a jQuery Fancybox plugin that includes the transitions Janis (the author of Fancybox) wrote to answer this question, as well as several others, and it will hopefully continue to evolve.

Look here: jquery.fancybox.transitions.js

Include javascript file in script tag after jQuery and Fancybox

<script src="path to jquery"></script>
<script src="path to fancybox"></script>
<script src="jquery.fancyboxbox.transitions.js"></script>


More information in the GitHub repository.



Ok, my advice is that if you don't know how to make the code yourself from JQuery, then your best bet is to keep an eye on the web until you can figure something out.

If you're looking for an opportunity to redesign or extend one of these plugins then a good book to read is JQuery: Newbie to the Ninja, check it out on Amazon. There are many good tips and tricks out there. UTF8 & QID = 1322832342 & Wed = 8-1

All in all, though you wouldn't want to reinvent the wheel. So there are several links to jQuery Lightbox plugins



All Articles