Fancybox loading animation does not trigger

Question

Is there any particular reason why fancybox function

$.fancybox.showActivity();

throws an error in my script? Is there a specific order in which the functions need to be called? The function is intended to show the loading image before the content is loaded to the popup. Here's my code:

$(".info_button").click(function () {

    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showActivity();
    $.ajax({
                url: "ajax.html",
                type: "POST",
                async:false,
                data: ({f:"get_info",pictid:pictid_browse}),
                success: function(data){
    $.fancybox({
                    'autoDimensions'    : false,
                'width'                 : 950,
                'height'                : 'auto',
                'transitionIn'      : 'none',
                'transitionOut'     : 'none'
            });
                $.fancybox({content:data,'autoDimensions':true,'scrolling':'no',});


    }
    });

    return false;
    });

The errors I'm getting are:

Uncaught TypeError: Object function () {
        F.open.apply( this, arguments );
    } has no method 'showActivity'

or

TypeError: 'undefined' is not a function (evaluating '$.fancybox.showActivity()')

Fancybox version: 2.1.3

UPDATE:

I have no clue what is going on but if I place the

$.fancybox.showLoading();

outside of

$(".info_button").click(function () {

then it fires and shows the animation. But I need it to happen once the item of a class '.info_button' i clicked

The following solution does not seem to solve the problem either:

    $(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}

The research shows that the loading is triggered if the following code is deleted:

 $.fancybox({
content:data,
                'autoDimensions'    : true,
            'width'                 : 'auto',
            'height'                : 'auto',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'scrolling':'no'
        });

This may mean that the fancybox does not work fine when included inside ajax function, but why-I have no clue

Answer 1

you can do this

    <style>
     #fancybox-loading{z-index:999999999;}
    </style>



     <script>
                       $.fancybox({
                                'href'          :your_url,  
                                'width'         : 900,
                                'height'        : 600,
                                'scrolling' : 'auto',
                                'type'              : 'iframe',
                                'titleShow'     : false,
                                'onComplete' : function() {
                                    $.fancybox.showActivity();
                                    $('#fancybox-frame').load(function() {
                                        $.fancybox.hideActivity();
                                    });
                                }
                        })
</script>

Answer 2

The problem seemed to be in the double fancybox call. Working code below:

    $('.info_button').bind('click', function() {
    var pictid_browse = $(this).parent().find('#pictid').val();
    $.fancybox.showLoading();
    $.ajax({
        type:"POST",
        cache:false,
        url:"ajax.html",
        data:({f:"get_info",pictid:pictid_browse}),
        success: function(data) {
            $.fancybox({content:data,'autoDimensions':true,'scrolling':'no'});
        }
    });
    return false;
});

Answer 3

The apidock on fancybox.net is kinda outdated ( its for 1.x.y ).

So if you use:

• the older 1.x.y you want to go for: $.fancybox.showActivity();
• the newer 2.x.y you want to go for: $.fancybox.showLoading();

You can find for documentation for 2.x.y fancyapss.com documentation and stuff. They keeping up the site "because the two versions (1.x and 2.x) have different license schemes" ( thx to @JFK ). You can report it, mb you get a gold star from them :)

========= Answer after question update ==========

I cant be sure without seeing the full html and js but You could try:

$(".info_button").bind('click', function (e) {
  e.stopPropagation(); e.preventDefault();
}