Question

This is a massive conundrum for me. I will explain in full.

I normally simply fire the fancyapps fancybox plugin like this…

$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        /* shtuff */

    }

});

But I need to pass a unquique varible when the a.gallery-thumb is clicked. This unique varible is generated using this…

FB.Canvas.getPageInfo(function(info) {

    var scrollPosition = info.scrollTop;

};

This scrollPosition unique varible is the current scroll position when my a.gallery-thumb is clicked.

So I need to then pass the scrollPosition variable into the fancybox function below.

$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');   

    }

});

Now your probably thinking why don’t I just do this…

$("a.gallery-thumb").fancybox({

    afterLoad   : function() {

        FB.Canvas.getPageInfo(function(info) {

            var scrollPosition = info.scrollTop;

            $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');   

        };            

    }

    afterShow    : function() { },
    onUpdate     : function() { }

});

OK – this works fine, but I need the scrollPosition variable in other fancybox callbacks like afterShow and onUpdate. But sure I can just repeat FB.Canvas.getPageInfo function… Not quite, I need the original generated value from when the gallery initial click was made.

So perhaps I have to do something like this, but I can’t seem to get it to work, any ideas on how I can get the below script working?

$("a.gallery-thumb").on('click', function (){

    event.preventDefault(); /* I'm trying to stop the image opening by default before my fancybox function runs */

    FB.Canvas.getPageInfo(function(info) {

        var scrollPosition = info.scrollTop;

        $(this).attr('rel','fancybox-thumb').fancybox({

            onUpdate   : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            afterLoad   : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            afterShow    : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            },

            onUpdate     : function() {

                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');

            }

        });

    });

});

See js fiddle here emulating my problem of the fancybox function not firing…

[http://jsfiddle.net/svsdx/1631/][1]

Answer 1

why not just move the variable declaration up a level so it’s in scope for the whole function? Like:

var scrollPosition = 0;
$("a.gallery-thumb").on('click', function (event){

    event.preventDefault(); /* I'm trying to stop the image opening by default before my fancybox function runs */
    FB.Canvas.getPageInfo(function(info) {

        scrollPosition = info.scrollTop;
    });
    return false;
    }).each(function(){

        $(this).attr('rel','fancybox-thumb').fancybox({             
            onUpdate   : function() {   
                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');           
            },                          
            afterLoad   : function() {              
                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');            
        },
            afterShow    : function() {
                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
            },
            onUpdate     : function() {
                $('.fancybox-wrap').css('top', '+=' + scrollPosition + 'px');
            }
        });
});