I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)

I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?

This is what I'm trying now:

$(document).ready(function(){
    //top-menu highlight link
    $(".photos").removeClass().addClass("active");
    $("a.fancybox").fancybox({
        'overlayShow' : true,
        '0opacity'       : true,
        'overlayOpacity': 0.6,
        'onStart' : function(){ $("body").css('overflow','hidden');},
        'onComplete': function(){ $("body").css('overflow','auto');}        
    });
});

I'm trying to keep working onStart and onComplete methods using FancyBox (jquery plugin)

I can't seem to get any of it to work for me. Do any of you know what I'm doing wrong?

This is what I'm trying now:

$(document).ready(function(){
    //top-menu highlight link
    $(".photos").removeClass().addClass("active");
    $("a.fancybox").fancybox({
        'overlayShow' : true,
        '0opacity'       : true,
        'overlayOpacity': 0.6,
        'onStart' : function(){ $("body").css('overflow','hidden');},
        'onComplete': function(){ $("body").css('overflow','auto');}        
    });
});

• javascript
• jquery
• fancybox

5 Answers 5

I was also trying to get onStart working...

I got fancybox v2.1.5, but when I do a search on 'onStart' in the javascript file it's not found. When I searched for '.trigger' I found: 'beforeLoad'

Maybe this could help someone out, in my case this is what I needed :)

I also saw there was an 'onReady' triggered somewhere which can be used instead of the 'onComplete' I guess!

P.S. I used it like this

$("a.popup").fancybox({
    beforeLoad: function() {
        return window.confirm('Continue?');
    }
});

FancyBox < version 2

FROM EXAMPLE (fancybox.net):

    $("#various7").fancybox({
        onStart: function() {
            return window.confirm('Continue?');
        },
        onCancel: function() {
            alert('Canceled!');
        },
        onComplete: function() {
            alert('Completed!');
        },
        onCleanup: function() {
            return window.confirm('Close?');
        },
        onClosed: function() {
            alert('Closed!');
        }
    });

EDIT: 06-2015

FancyBox >= version 2

FROM EXAMPLE (fancyapps.com):

    $("#various7").fancybox({
        onUpdate: function() {
            alert('update!');
        },
        onCancel: function() {
            alert('cancel!');
        },
        onPlayStart: function() {
            alert('play start!');
        },
        onPlayEnd: function() {
            alert('play end!');
        },
        beforeClose: function() {
            alert('before close!');
        },
        afterClose: function() {
            alert('after close!');
        },
        beforeShow: function() {
            alert('before show!');
        },
        afterShow: function() {
            alert('after show!');
        },
        beforeLoad: function() {
            alert('before load!');
        },
        afterLoad: function() {
            alert('after load!');
        }
    });

Notice that the callback methods are different in fancybox2. It uses beforeLoad, afterShow, etc. Please consult fancybox2's documentation here.

Try this:

$(document).ready(function(){
    $("a.fancybox").fancybox({
        'overlayShow' : true,
        'opacity' : true,
        'overlayOpacity': 0.6,
        'onStart' : function(){
            $("body").css('overflow','hidden');
        },
        'onCleanup': function(){
            $("body").css('overflow','auto');
        }
    });
});

fancybox onStart onComplete status not working working with jquery 1.9.1 try jquery 1.6.4.